First Commit

2026-03-29 08:53:54 +01:00 · 2026-03-29 08:53:54 +01:00 · 711e989ecd
commit 711e989ecd
226 changed files with 15615 additions and 0 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -0,0 +1,2 @@
 .git
 node_modules
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,43 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 # dependencies
 /node_modules
 /.pnp
 .pnp.*
 .yarn/*
 !.yarn/patches
 !.yarn/plugins
 !.yarn/releases
 !.yarn/versions
 # testing
 /coverage
 # next.js
 /.next/
 /out/
 # production
 /build
 # misc
 .DS_Store
 *.pem
 # debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 # env files (can opt-in for committing if needed)
 .env*
 # vercel
 .vercel
 # typescript
 *.tsbuildinfo
 next-env.d.ts
 dsql-schema-to-typedef.json
 .data
 .bunext
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1 @@
@moduletrace:registry=https://git.tben.me/api/packages/moduletrace/npm/
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,3 @@
 {
    "css.lint.unknownAtRules": "ignore"
 }
--- a/19
+++ b/19
@ -0,0 +1,19 @@
 FROM oven/bun:1.3-debian
 RUN apt update
 RUN apt install -y curl bash nano wget zip unzip
 ENV NODE_ENV=production
 RUN mkdir /app
 WORKDIR /app
 RUN touch /root/.bashrc
 RUN echo 'alias ll="ls -laF"' >/root/.bashrc
 COPY . /app/.
 RUN bun install
 CMD ["bun", "start"]
--- a/README.md
+++ b/README.md
@ -0,0 +1 @@
 # Welcome to Tben
--- a/bun.lockb
+++ b/bun.lockb
--- a/buncid.config.json
+++ b/buncid.config.json
@ -0,0 +1,7 @@
 {
    "start": "bun start",
    "preflight": ["bunx buncid-builds-next"],
    "postflight": ["echo 'Server Running ...'"],
    "first_run": true,
    "port": [3000]
 }
--- a/bunext.config.ts
+++ b/bunext.config.ts
@ -0,0 +1,6 @@
 import type { BunextConfig } from "@moduletrace/bunext/types";
 const config: BunextConfig = {
    port: 3070,
 };
 export default config;
--- a/bunfig.toml
+++ b/bunfig.toml
@ -0,0 +1,3 @@
 [install.scopes]
 "@moduletrace" = "https://git.tben.me/api/packages/moduletrace/npm/"
--- a/package.json
+++ b/package.json
@ -0,0 +1,41 @@
 {
    "name": "new-personal-site",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "NODE_ENV=development bunx bunext dev",
        "build": "bunx bunext build",
        "start": "NODE_ENV=production bunx bunext start",
        "schema-to-typedef": "bunx dsql-schema-to-typedef"
    },
    "dependencies": {
        "@moduletrace/buncid": "^1.0.7",
        "@moduletrace/bunext": "^1.0.40",
        "@moduletrace/datasquirel": "^5.7.51",
        "gray-matter": "^4.0.3",
        "html-to-react": "^1.7.0",
        "lodash": "^4.17.21",
        "lucide-react": "^0.462.0",
        "marked": "^17.0.5",
        "openai": "^6.21.0",
        "prism-react-renderer": "^2.4.1",
        "prism-themes": "^1.9.0",
        "react-markdown": "^10.1.0",
        "rehype-prism-plus": "^2.0.1",
        "remark-gfm": "^4.0.1",
        "showdown": "^2.1.0",
        "tailwind-merge": "^2.5.5"
    },
    "devDependencies": {
        "@tailwindcss/postcss": "^4.1.11",
        "@types/lodash": "^4.17.13",
        "@types/marked": "^6.0.0",
        "@types/node": "^20",
        "@types/react": "^18",
        "@types/react-dom": "^18",
        "@types/showdown": "^2.0.6",
        "postcss": "^8",
        "tailwindcss": "^4.1.11",
        "typescript": "^5"
    }
 }
--- a/public/documents/Resume-Benjamin-Toby-Linkedin.pdf
+++ b/public/documents/Resume-Benjamin-Toby-Linkedin.pdf
--- a/public/documents/Resume-Benjamin-Toby.pdf
+++ b/public/documents/Resume-Benjamin-Toby.pdf
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/favicon.png
+++ b/public/favicon.png
--- a/public/icons/android-chrome-192x192.png
+++ b/public/icons/android-chrome-192x192.png
--- a/public/icons/apple-touch-icon.png
+++ b/public/icons/apple-touch-icon.png
--- a/public/icons/icon-192x192.png
+++ b/public/icons/icon-192x192.png
--- a/public/icons/icon-256x256.png
+++ b/public/icons/icon-256x256.png
--- a/public/icons/icon-384x384.png
+++ b/public/icons/icon-384x384.png
--- a/public/icons/icon-512x512.png
+++ b/public/icons/icon-512x512.png
--- a/public/icons/touch-icon-ipad-retina.png
+++ b/public/icons/touch-icon-ipad-retina.png
--- a/public/icons/touch-icon-ipad.png
+++ b/public/icons/touch-icon-ipad.png
--- a/public/icons/touch-icon-iphone-retina.png
+++ b/public/icons/touch-icon-iphone-retina.png
--- a/public/icons/touch-icon-iphone.png
+++ b/public/icons/touch-icon-iphone.png
--- a/public/images/Base-Fitness-Screenshot.webp
+++ b/public/images/Base-Fitness-Screenshot.webp
--- a/public/images/Homeruntoken-graphic.jpg
+++ b/public/images/Homeruntoken-graphic.jpg
--- a/public/images/Module-Trace-Usage.gif
+++ b/public/images/Module-Trace-Usage.gif
--- a/public/images/Module-trace-image.png
+++ b/public/images/Module-trace-image.png
--- a/public/images/castcord-graphic.jpg
+++ b/public/images/castcord-graphic.jpg
--- a/public/images/datasquirel-img.jpg
+++ b/public/images/datasquirel-img.jpg
--- a/public/images/external-link-dark.png
+++ b/public/images/external-link-dark.png
--- a/public/images/external-link.png
+++ b/public/images/external-link.png
--- a/public/images/github-white.png
+++ b/public/images/github-white.png
--- a/public/images/guaranteed.jpg
+++ b/public/images/guaranteed.jpg
--- a/public/images/linkedin-white.png
+++ b/public/images/linkedin-white.png
--- a/public/images/logo-icon-white.svg
+++ b/public/images/logo-icon-white.svg
@ -0,0 +1 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 611 611" width="611pt" height="611pt"><defs><clipPath id="_clipPath_2zfa3boh6FNyOkB9zT4Cm84iY9vA0NWV"><rect width="611" height="611"/></clipPath></defs><g clip-path="url(#_clipPath_2zfa3boh6FNyOkB9zT4Cm84iY9vA0NWV)"><rect x="0" y="0" width="610.63" height="610.63" transform="matrix(1,0,0,1,0,0)" fill="none"/><clipPath id="_clipPath_7KSpsgRxupOAmqFAFnlf5LCTNooKCwdC"><rect x="0" y="0" width="610.63" height="610.63" transform="matrix(1,0,0,1,0,0)" fill="rgb(255,255,255)"/></clipPath><g clip-path="url(#_clipPath_7KSpsgRxupOAmqFAFnlf5LCTNooKCwdC)"><g><g><g><path d=" M 610.63 515.37 L 610.63 619.37 L 590.72 607.63 L 461.72 531.55 L 306.83 617 L 151.94 702.39 L 138.33 709.89 L 0 786.14 L 0 0 L 362 0 C 434.173 0 490.98 15.707 532.42 47.12 C 534.38 48.613 536.297 50.137 538.17 51.69 C 575.177 82.423 593.98 125.773 594.58 181.74 L 594.58 184.49 C 594.58 225.95 583.717 260.877 561.99 289.27 C 540.263 317.663 511.353 336.547 475.26 345.92 C 518.027 355.92 551.283 376.477 575.03 407.59 C 598.777 438.703 610.643 474.63 610.63 515.37 Z  M 368.49 519.89 C 378.163 512.21 383 499.673 383 482.28 C 383 448.193 363.28 431.15 323.84 431.15 L 222.6 431.15 L 222.6 531.42 L 323.87 531.42 C 343.923 531.42 358.797 527.577 368.49 519.89 Z  M 368 227.61 C 368 210.23 363.153 197.36 353.46 189 C 343.767 180.64 328.893 176.463 308.84 176.47 L 222.6 176.47 L 222.6 276.74 L 308.83 276.74 C 328.877 276.74 343.75 272.74 353.45 264.74 C 363.15 256.74 368 244.363 368 227.61 Z " fill="rgb(255,255,255)"/></g></g></g></g></g></svg>
--- a/public/images/logo-icon.svg
+++ b/public/images/logo-icon.svg
@ -0,0 +1,15 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg width="100%" height="100%" viewBox="0 0 611 611" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <rect id="Artboard1" x="0" y="0" width="610.63" height="610.63" style="fill:none;"/>
    <clipPath id="_clip1">
        <rect id="Artboard11" serif:id="Artboard1" x="0" y="0" width="610.63" height="610.63"/>
    </clipPath>
    <g clip-path="url(#_clip1)">
        <g id="Layer_2">
            <g id="Layer_1-2">
                <path d="M610.63,515.37L610.63,619.37L590.72,607.63L461.72,531.55L306.83,617L151.94,702.39L138.33,709.89L0,786.14L0,0L362,0C434.173,0 490.98,15.707 532.42,47.12C534.38,48.613 536.297,50.137 538.17,51.69C575.177,82.423 593.98,125.773 594.58,181.74L594.58,184.49C594.58,225.95 583.717,260.877 561.99,289.27C540.263,317.663 511.353,336.547 475.26,345.92C518.027,355.92 551.283,376.477 575.03,407.59C598.777,438.703 610.643,474.63 610.63,515.37ZM368.49,519.89C378.163,512.21 383,499.673 383,482.28C383,448.193 363.28,431.15 323.84,431.15L222.6,431.15L222.6,531.42L323.87,531.42C343.923,531.42 358.797,527.577 368.49,519.89ZM368,227.61C368,210.23 363.153,197.36 353.46,189C343.767,180.64 328.893,176.463 308.84,176.47L222.6,176.47L222.6,276.74L308.83,276.74C328.877,276.74 343.75,272.74 353.45,264.74C363.15,256.74 368,244.363 368,227.61Z" style="fill:rgb(99,105,176);fill-rule:nonzero;"/>
            </g>
        </g>
    </g>
 </svg>
--- a/public/images/logo-v3-cropped.png
+++ b/public/images/logo-v3-cropped.png
--- a/public/images/logo-v3.png
+++ b/public/images/logo-v3.png
--- a/public/images/logo-v3.svg
+++ b/public/images/logo-v3.svg
@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 610.63 1042.32"><defs><style>.cls-1{fill:#565e9a;}.cls-2{fill:#6369b0;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="610.63 784.67 610.63 952.95 461.71 1042.32 461.71 874.03 464.52 872.35 610.63 784.67"/><polygon class="cls-1" points="610.63 619.33 610.63 784.67 461.71 702.53 468.56 698.7 563.9 645.44 610.63 619.33"/><path class="cls-2" d="M610.63,515.37v104l-19.91-11.74-129-76.08L306.83,617,151.94,702.39l-13.61,7.5L0,786.14V0H362Q470.26,0,532.42,47.12q2.94,2.24,5.75,4.57,55.51,46.1,56.41,130.05c0,.92,0,1.83,0,2.75q0,62.19-32.59,104.78t-86.73,56.65q64.15,15,99.77,61.67T610.63,515.37Zm-242.14,4.52Q383,508.37,383,482.28q0-51.13-59.16-51.13H222.6V531.42H323.87Q353.95,531.42,368.49,519.89ZM368,227.61q0-26.07-14.54-38.61t-44.62-12.53H222.6V276.74h86.23q30.07,0,44.62-12T368,227.61Z"/><polygon class="cls-2" points="461.71 874.03 461.71 1042.32 306.83 957.3 306.83 789.02 461.71 874.03"/><polygon class="cls-1" points="306.83 789.02 306.83 957.3 151.94 1042.32 151.94 875.51 156.15 873.19 306.83 789.02"/><polygon class="cls-2" points="151.94 875.51 151.94 1042.32 0 958.98 0 786.14 151.94 875.51"/></g></g></svg>
--- a/public/images/logo-white.svg
+++ b/public/images/logo-white.svg
@ -0,0 +1,14 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg width="100%" height="100%" viewBox="0 0 611 1043" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g id="Layer_2">
        <g id="Layer_1-2">
            <path d="M610.63,784.67L610.63,952.95L461.71,1042.32L461.71,874.03L464.52,872.35L610.63,784.67Z" style="fill:white;fill-rule:nonzero;"/>
            <path d="M610.63,619.33L610.63,784.67L461.71,702.53L468.56,698.7L563.9,645.44L610.63,619.33Z" style="fill:white;fill-rule:nonzero;"/>
            <path d="M610.63,515.37L610.63,619.37L590.72,607.63L461.72,531.55L306.83,617L151.94,702.39L138.33,709.89L0,786.14L0,0L362,0C434.173,0 490.98,15.707 532.42,47.12C534.38,48.613 536.297,50.137 538.17,51.69C575.177,82.423 593.98,125.773 594.58,181.74L594.58,184.49C594.58,225.95 583.717,260.877 561.99,289.27C540.263,317.663 511.353,336.547 475.26,345.92C518.027,355.92 551.283,376.477 575.03,407.59C598.777,438.703 610.643,474.63 610.63,515.37ZM368.49,519.89C378.163,512.21 383,499.673 383,482.28C383,448.193 363.28,431.15 323.84,431.15L222.6,431.15L222.6,531.42L323.87,531.42C343.923,531.42 358.797,527.577 368.49,519.89ZM368,227.61C368,210.23 363.153,197.36 353.46,189C343.767,180.64 328.893,176.463 308.84,176.47L222.6,176.47L222.6,276.74L308.83,276.74C328.877,276.74 343.75,272.74 353.45,264.74C363.15,256.74 368,244.363 368,227.61Z" style="fill:white;fill-rule:nonzero;"/>
            <path d="M461.71,874.03L461.71,1042.32L306.83,957.3L306.83,789.02L461.71,874.03Z" style="fill:white;fill-rule:nonzero;"/>
            <path d="M306.83,789.02L306.83,957.3L151.94,1042.32L151.94,875.51L156.15,873.19L306.83,789.02Z" style="fill:white;fill-rule:nonzero;"/>
            <path d="M151.94,875.51L151.94,1042.32L0,958.98L0,786.14L151.94,875.51Z" style="fill:white;fill-rule:nonzero;"/>
        </g>
    </g>
 </svg>
--- a/public/images/mattermost-logo.webp
+++ b/public/images/mattermost-logo.webp
--- a/public/images/my-photo-2.png
+++ b/public/images/my-photo-2.png
--- a/public/images/my-photo-3.png
+++ b/public/images/my-photo-3.png
--- a/public/images/my-photo-stroked.png
+++ b/public/images/my-photo-stroked.png
--- a/public/images/my-photo.png
+++ b/public/images/my-photo.png
--- a/public/images/next-7-graphic-min.jpg
+++ b/public/images/next-7-graphic-min.jpg
--- a/public/images/next7screenshot.png
+++ b/public/images/next7screenshot.png
--- a/public/images/programming-laptop.png
+++ b/public/images/programming-laptop.png
--- a/public/images/projects-section-image.png
+++ b/public/images/projects-section-image.png
--- a/public/images/renition-graphic.jpg
+++ b/public/images/renition-graphic.jpg
--- a/public/images/rm378-07c-min.png
+++ b/public/images/rm378-07c-min.png
--- a/public/images/showmerebates.jpg
+++ b/public/images/showmerebates.jpg
--- a/public/images/showmerebates.png
+++ b/public/images/showmerebates.png
--- a/public/images/stirrmediascreenshot.png
+++ b/public/images/stirrmediascreenshot.png
--- a/public/images/summit-lending.jpg
+++ b/public/images/summit-lending.jpg
--- a/public/images/trader-hub-graphic-min.jpg
+++ b/public/images/trader-hub-graphic-min.jpg
--- a/public/images/traderhubscreenshot.png
+++ b/public/images/traderhubscreenshot.png
--- a/public/images/why-so-serious.png
+++ b/public/images/why-so-serious.png
--- a/public/robots.txt
+++ b/public/robots.txt
@ -0,0 +1,11 @@
 # https://www.tben.me robots.txt
 User-agent: *
 Allow: /
 # Sitemaps
 Sitemap: https://www.tben.me/sitemap.xml
 # Optional: disallow common non-content paths (uncomment if needed)
 Disallow: /api/
 Disallow: /_next/
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@ -0,0 +1,58 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <!-- Homepage -->
  <url>
    <loc>https://www.tben.me/</loc>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
  <!-- Main Pages -->
  <url>
    <loc>https://www.tben.me/about</loc>
    <changefreq>monthly</changefreq>
    <priority>0.7</priority>
  </url>
  <url>
    <loc>https://www.tben.me/skills</loc>
    <changefreq>monthly</changefreq>
    <priority>0.7</priority>
  </url>
  <url>
    <loc>https://www.tben.me/work</loc>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://www.tben.me/blog</loc>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://www.tben.me/contact</loc>
    <changefreq>monthly</changefreq>
    <priority>0.6</priority>
  </url>
  <!-- Blog Posts -->
  <url>
    <loc>https://www.tben.me/blog/nginx-reverse-proxy-caching-rate-limiting-static-files</loc>
    <changefreq>monthly</changefreq>
    <priority>0.6</priority>
  </url>
  <url>
    <loc>https://www.tben.me/blog/solving-the-database-hassle</loc>
    <changefreq>monthly</changefreq>
    <priority>0.5</priority>
  </url>
  <url>
    <loc>https://www.tben.me/blog/find-your-perfect-framework</loc>
    <changefreq>monthly</changefreq>
    <priority>0.5</priority>
  </url>
  <url>
    <loc>https://www.tben.me/blog/choosing-your-tech-stack</loc>
    <changefreq>monthly</changefreq>
    <priority>0.5</priority>
  </url>
 </urlset>
--- a/src/components/general/Logo.tsx
+++ b/src/components/general/Logo.tsx
@ -0,0 +1,22 @@
 type Props = {
    size?: number;
 };
 export default function Logo({ size }: Props) {
    const sizeRatio = 50 / 100;
    const width = size || 50;
    const height = width * sizeRatio;
    return (
        <a href="/">
            <img
                src="/images/logo-white.svg"
                alt="Main Logo"
                width={width}
                height={height}
                style={{
                    minWidth: width + "px",
                }}
            />
        </a>
    );
 }
--- a/src/components/general/markdown-renderer-2.tsx
+++ b/src/components/general/markdown-renderer-2.tsx
@ -0,0 +1,79 @@
 import React from "react";
 import ReactMarkdown from "react-markdown";
 import { Highlight, themes } from "prism-react-renderer";
 const MarkdownRenderer2 = ({ content }: { content: string }) => {
    return (
        <ReactMarkdown
            components={{
                code({ node, inline, className, children, ...props }: any) {
                    const { key, ...cleanProps } = props;
                    const match = /language-(\w+)/.exec(className || "");
                    const language = match ? match[1] : "";
                    if (!inline && match) {
                        return (
                            <Highlight
                                key={key}
                                theme={themes.vsDark}
                                code={String(children).replace(/\n$/, "")}
                                language={language}
                            >
                                {({
                                    className,
                                    style,
                                    tokens,
                                    getLineProps,
                                    getTokenProps,
                                }) => (
                                    <pre
                                        className={className}
                                        style={{
                                            ...style,
                                            padding: "1.5rem",
                                            borderRadius: "8px",
                                            fontSize: "0.9rem",
                                            overflowX: "auto",
                                        }}
                                    >
                                        {tokens.map((line, i) => (
                                            <div
                                                key={i}
                                                {...getLineProps({
                                                    line,
                                                    key: i,
                                                })}
                                            >
                                                {line.map((token, key) => (
                                                    <span
                                                        key={key}
                                                        {...getTokenProps({
                                                            token,
                                                            key,
                                                        })}
                                                    />
                                                ))}
                                            </div>
                                        ))}
                                    </pre>
                                )}
                            </Highlight>
                        );
                    }
                    // Fallback for inline code or code without a language tag
                    return (
                        <code key={key} className={className} {...cleanProps}>
                            {children}
                        </code>
                    );
                },
            }}
        >
            {content}
        </ReactMarkdown>
    );
 };
 export default MarkdownRenderer2;
--- a/src/components/general/markdown-renderer.tsx
+++ b/src/components/general/markdown-renderer.tsx
@ -0,0 +1,15 @@
 import sd from "showdown";
 const conv = new sd.Converter({});
 const MarkdownRenderer = ({ content }: { content: string }) => {
    const html = conv.makeHtml(content);
    return (
        <div
            className="markdown-rendered"
            dangerouslySetInnerHTML={{ __html: html }}
        />
    );
 };
 export default MarkdownRenderer;
--- a/src/components/lib/(functions)/popver/grab-popover-styles.ts
+++ b/src/components/lib/(functions)/popver/grab-popover-styles.ts
@ -0,0 +1,75 @@
 import _ from "lodash";
 import React from "react";
 import { TWUIPopoverStyles } from "../../elements/Modal";
 import twuiNumberfy from "../../utils/numberfy";
 type Params = {
    targetElRef: React.RefObject<HTMLElement | null>;
    position: (typeof TWUIPopoverStyles)[number];
 };
 export default function twuiGrabPopoverStyles({
    position,
    targetElRef,
 }: Params): React.CSSProperties {
    if (!targetElRef.current) return {};
    const rect = targetElRef.current.getBoundingClientRect();
    const targetElCurrStyles = window.getComputedStyle(targetElRef.current);
    const targetElRightPadding = twuiNumberfy(targetElCurrStyles.paddingRight);
    let popoverStyle: React.CSSProperties = {
        position: "absolute",
        zIndex: 100,
    };
    const defaultBottomStyle: React.CSSProperties = {
        top: rect.bottom + window.scrollY + 8,
        left: rect.left + window.scrollX + rect.width / 2,
        transform: "translateX(-50%)",
    };
    const defaultTopStyleStyle: React.CSSProperties = {
        bottom: window.innerHeight - (rect.top + window.scrollY) + 8,
        left: rect.left + window.scrollX + rect.width / 2,
        transform: "translateX(-50%)",
    };
    if (position === "bottom") {
        popoverStyle = _.merge(popoverStyle, defaultBottomStyle);
    } else if (position === "bottom-left") {
        popoverStyle = _.merge(
            popoverStyle,
            _.omit(defaultBottomStyle, ["transform"]),
            {
                left: rect.left,
            } as React.CSSProperties
        );
    } else if (position === "bottom-right") {
        popoverStyle = _.merge(
            popoverStyle,
            _.omit(defaultBottomStyle, ["left", "transform"]),
            {
                right:
                    window.innerWidth -
                    (rect.left + window.scrollX) -
                    rect.width -
                    targetElRightPadding,
            } as React.CSSProperties
        );
    } else if (position === "top") {
        popoverStyle = _.merge(popoverStyle, defaultTopStyleStyle);
    } else if (position === "right") {
        popoverStyle.top = rect.top + window.scrollY + rect.height / 2;
        popoverStyle.left = rect.right + window.scrollX + 8;
        popoverStyle.transform = "translateY(-50%)";
    } else if (position === "left") {
        popoverStyle.top = rect.top + window.scrollY + rect.height / 2;
        popoverStyle.right =
            window.innerWidth - (rect.left + window.scrollX) + 8;
        popoverStyle.transform = "translateY(-50%)";
    }
    return popoverStyle;
 }
--- a/src/components/lib/(partials)/ModalComponent.tsx
+++ b/src/components/lib/(partials)/ModalComponent.tsx
@ -0,0 +1,65 @@
 import React from "react";
 import { twMerge } from "tailwind-merge";
 import ReactDOM from "react-dom";
 import Button from "../layout/Button";
 import { X } from "lucide-react";
 import { TWUI_MODAL_PROPS } from "../elements/Modal";
 import Paper from "../elements/Paper";
 import _ from "lodash";
 type Props = TWUI_MODAL_PROPS & {
    open: boolean;
    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 /**
 * # Modal Main Component
 */
 export default function ModalComponent({ open, setOpen, ...props }: Props) {
    if (!open) return null;
    return ReactDOM.createPortal(
        <div
            className={twMerge(
                "fixed z-[200] top-0 left-0 w-screen h-screen",
                "flex flex-col items-center justify-center p-4",
                "twui-modal-root"
            )}
            role="dialog"
            aria-modal="true"
        >
            <div
                className={twMerge(
                    "absolute top-0 left-0 bg-dark/80 z-0",
                    "w-screen h-screen"
                )}
                onClick={(e) => {
                    setOpen(false);
                }}
            ></div>
            <Paper
                {..._.omit(props, ["targetWrapperProps"])}
                className={twMerge(
                    "z-10 max-w-modal bg-background-light dark:bg-background-dark",
                    "w-full relative max-h-[95vh] overflow-y-auto",
                    "twui-modal-content",
                    props.className
                )}
            >
                {props.children}
                <Button
                    className="absolute top-0 right-0 p-2"
                    variant="ghost"
                    color="gray"
                    onClick={() => {
                        setOpen(false);
                    }}
                    title="Close Modal Button"
                >
                    <X size={30} />
                </Button>
            </Paper>
        </div>,
        document.getElementById("twui-modal-root") as HTMLElement
    );
 }
--- a/src/components/lib/(partials)/PopoverComponent.tsx
+++ b/src/components/lib/(partials)/PopoverComponent.tsx
@ -0,0 +1,115 @@
 import React from "react";
 import { twMerge } from "tailwind-merge";
 import ReactDOM from "react-dom";
 import { TWUI_MODAL_PROPS } from "../elements/Modal";
 import Paper from "../elements/Paper";
 import _ from "lodash";
 import twuiGrabPopoverStyles from "../(functions)/popver/grab-popover-styles";
 type Props = TWUI_MODAL_PROPS & {
    open: boolean;
    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
    targetElRef?: React.RefObject<HTMLElement | null>;
    popoverTargetActiveRef: React.MutableRefObject<boolean>;
    popoverContentActiveRef: React.MutableRefObject<boolean>;
 };
 /**
 * # Modal Main Component
 */
 export default function PopoverComponent({
    open,
    setOpen,
    targetElRef,
    position = "bottom",
    trigger = "hover",
    debounce,
    popoverTargetActiveRef,
    popoverContentActiveRef,
    popoverReferenceRef,
    isPopover,
    ...props
 }: Props) {
    if (!open) return null;
    const [style, setStyle] = React.useState({});
    React.useEffect(() => {
        if (open && targetElRef?.current) {
            const popoverStyle = twuiGrabPopoverStyles({
                position,
                targetElRef,
            });
            setStyle(popoverStyle);
        }
    }, [open, targetElRef, position]);
    let closeTimeout: any;
    const popoverEnterFn = React.useCallback(() => {
        popoverContentActiveRef.current = true;
        popoverTargetActiveRef.current = false;
        setOpen(true);
    }, []);
    const popoverLeaveFn = React.useCallback(() => {
        window.clearTimeout(closeTimeout);
        closeTimeout = setTimeout(() => {
            if (popoverTargetActiveRef.current) {
                popoverTargetActiveRef.current = false;
                return;
            }
            setOpen(false);
        }, debounce);
    }, []);
    if (!open) return null;
    return ReactDOM.createPortal(
        <Paper
            {...props}
            className={twMerge(
                "max-w-[300px] z-[250]",
                "twui-popover-content",
                props.className
            )}
            style={{ ...style, ...props.style }}
            onMouseEnter={
                trigger === "hover" ? popoverEnterFn : props.onMouseEnter
            }
            onMouseLeave={
                trigger === "hover" ? popoverLeaveFn : props.onMouseLeave
            }
            role="dialog"
            aria-modal="true"
        >
            {/* <div
                className="absolute w-0 h-0 border-8 border-transparent bg-white"
                style={{
                    ...(position === "bottom" && {
                        top: "-16px",
                        left: "50%",
                        transform: "translateX(-50%)",
                    }),
                    ...(position === "top" && {
                        bottom: "-16px",
                        left: "50%",
                        transform: "translateX(-50%)",
                    }),
                    ...(position === "right" && {
                        top: "50%",
                        left: "-16px",
                        transform: "translateY(-50%)",
                    }),
                    ...(position === "left" && {
                        top: "50%",
                        right: "-16px",
                        transform: "translateY(-50%)",
                    }),
                }}
            /> */}
            {props.children}
        </Paper>,
        document.getElementById("twui-popover-root") as HTMLElement
    );
 }
--- a/src/components/lib/Readme.md
+++ b/src/components/lib/Readme.md
@ -0,0 +1,27 @@
 # Tailwind CSS UI
 A modular skeletal framework for tailwind css
 ## Perequisites
 You need a couple of packages and settings to integrate this package
 ### Packages
 - React
 - React Dom
 - Tailwind CSS **version 4**
 ### CSS Base
 This package contains a `base.css` file which has all the base css rules required to run. This css file must be imported in your base project, and it can be update in a separate `.css` file.
 ### Install packages
 ```sh
 bun add lucide-react tailwind-merge html-to-react gray-matter mdx typescript lodash react-code-blocks react-responsive-modal next-mdx-remote remark-gfm rehype-prism-plus openai
 ```
 ```sh
 bun add -D @types/ace @types/react @types/react-dom tailwindcss @types/mdx @next/mdx
 ```
--- a/src/components/lib/base.css
+++ b/src/components/lib/base.css
@ -0,0 +1,173 @@
@import "tailwindcss";
@theme inline {
    --breakpoint-xs: 350px;
    --breakpoint-xxs: 300px;
    --breakpoint-xxl: 1600px;
    --color-background-light: #ffffff;
    --color-foreground-light: #171717;
    --color-background-dark: #0a0a0a;
    --color-foreground-dark: #ededed;
    --color-dark: #000000;
    --color-primary: #000000;
    --color-primary-hover: #29292b;
    --color-primary-outline: #29292b;
    --color-primary-text: #29292b;
    --color-primary-dark: #29292b;
    --color-primary-dark-hover: #4b4b4b;
    --color-primary-dark-outline: #4b4b4b;
    --color-primary-dark-text: #ffffff;
    --color-secondary: #000000;
    --color-secondary-hover: #dddddd;
    --color-secondary-outline: #dddddd;
    --color-secondary-text: #dddddd;
    --color-secondary-dark: #000000;
    --color-secondary-dark-hover: #dddddd;
    --color-secondary-dark-outline: #dddddd;
    --color-secondary-dark-text: #dddddd;
    --color-accent: #000000;
    --color-accent-hover: #dddddd;
    --color-accent-outline: #dddddd;
    --color-accent-text: #dddddd;
    --color-accent-dark: #000000;
    --color-accent-dark-hover: #dddddd;
    --color-accent-dark-outline: #dddddd;
    --color-accent-dark-text: #dddddd;
    --color-gray: #dfe6ef;
    --color-gray-hover: #dfe6ef;
    --color-gray-dark: #1d2b3f;
    --color-gray-dark-hover: #132033;
    --color-success: #0aa156;
    --color-success-dark: #0aa156;
    --color-error: #e5484d;
    --color-error-dark: #e5484d;
    --color-warning: #ff6900;
    --color-link: #0051c9;
    --color-link-dark: #548adb;
    --radius-default: 5px;
    --radius-default-sm: 3px;
    --radius-default-xs: 1px;
    --radius-default-lg: 7px;
    --radius-default-xl: 10px;
    --container-container: 1200px;
    --container-modal: 800px;
 }
@custom-variant dark (&:where(.dark, .dark *));
 body {
    @apply bg-background-light dark:bg-background-dark;
    @apply text-foreground-light dark:text-foreground-dark;
    font-family: Arial, Helvetica, sans-serif;
 }
 .tox-tinymce {
    @apply w-full !rounded-default !border-slate-300 dark:!border-white/20;
 }
 /* .moving-object {
    @apply !bg-green-500;
 } */
 option {
    @apply dark:bg-background-dark;
 }
 .mobile-paper-hidden {
    @apply max-md:p-0 max-md:border-none max-md:bg-transparent;
 }
 ::-webkit-scrollbar {
    @apply w-2;
 }
 ::-webkit-scrollbar-track {
    @apply bg-gray rounded-full dark:bg-gray;
 }
 ::-webkit-scrollbar-thumb {
    @apply bg-foreground-light/40 rounded-full hover:bg-foreground-light/60;
    @apply dark:bg-foreground-dark/40 rounded-full hover:bg-foreground-dark/60;
 }
 * {
    scrollbar-width: thin;
    scrollbar-color: theme("colors.gray.400") theme("colors.gray.100");
 }
@supports (selector(:where(*))) {
    :where(*) {
        scrollbar-width: thin;
        scrollbar-color: theme("colors.gray.400") theme("colors.gray.100");
    }
    .dark :where(*) {
        scrollbar-color: theme("colors.gray.500") theme("colors.gray.800");
    }
 }
 .ace_editor {
    @apply dark:bg-background-dark;
 }
 .tox-editor-header,
 .tox-toolbar-overlord,
 .tox .tox-toolbar,
 .tox .tox-toolbar__overflow,
 .tox .tox-toolbar__primary,
 .tox .tox-tbtn,
 .tox .tox-sidebar,
 .tox .tox-statusbar,
 .tox .tox-view-wrap,
 .tox .tox-view-wrap__slot-container,
 .tox .tox-editor-container,
 .tox .tox-edit-area__iframe,
 .twui-tinymce {
    @apply dark:!bg-background-dark;
 }
 .twui-tinymce *:focus {
    @apply !outline-white/10;
 }
 .tox .tox-tbtn:hover {
    @apply dark:!bg-white/10;
 }
 .ace_gutter {
    @apply dark:!bg-background-dark;
 }
 .ace_active-line,
 .ace_gutter-active-line {
    @apply dark:!bg-white/5;
 }
 .normal-text {
    @apply text-foreground-light dark:text-foreground-dark;
 }
 ol {
    list-style: decimal;
 }
 ul {
    list-style: disc;
 }
 ul,
 ol {
    margin-left: 25px;
 }
--- a/src/components/lib/bun.lock
+++ b/src/components/lib/bun.lock
@ -0,0 +1,193 @@
 {
  "lockfileVersion": 1,
  "workspaces": {
    "": {
      "name": "tailwind-ui",
      "dependencies": {
        "@xterm/xterm": "latest",
        "html-to-react": "^1.7.0",
        "lodash": "latest",
        "lucide-react": "latest",
        "react-code-blocks": "latest",
        "react-responsive-modal": "latest",
        "tailwind-merge": "latest",
        "typescript": "latest",
      },
      "devDependencies": {
        "@next/mdx": "latest",
        "@types/ace": "latest",
        "@types/bun": "latest",
        "@types/lodash": "latest",
        "@types/mdx": "latest",
        "@types/node": "latest",
        "@types/react": "latest",
        "@types/react-dom": "latest",
        "postcss": "latest",
        "tailwindcss": "^4",
      },
    },
  },
  "packages": {
    "@babel/runtime": ["@babel/runtime@7.27.1", "", {}, "sha512-1x3D2xEk2fRo3PAhwQwu5UubzgiVWSXTBfWpVd2Mx2AzRqJuDJCsgaDVZ7HB5iGzDW1Hl1sWN2mFyKjmR9uAog=="],
    "@bedrock-layout/use-forwarded-ref": ["@bedrock-layout/use-forwarded-ref@1.6.1", "", { "dependencies": { "@bedrock-layout/use-stateful-ref": "^1.4.1" }, "peerDependencies": { "react": "^16.8 || ^17 || ^18" } }, "sha512-GD9A9AFLzFNjr7k6fgerSqxfwDWl+wsPS11PErOKe1zkVz0y7RGC9gzlOiX/JrgpyB3NFHWIuGtoOQqifJQQpw=="],
    "@bedrock-layout/use-stateful-ref": ["@bedrock-layout/use-stateful-ref@1.4.1", "", { "peerDependencies": { "react": "^16.8 || ^17 || ^18" } }, "sha512-4eKO2KdQEXcR5LI4QcxqlJykJUDQJWDeWYAukIn6sRQYoabcfI5kDl61PUi6FR6o8VFgQ8IEP7HleKqWlSe8SQ=="],
    "@emotion/is-prop-valid": ["@emotion/is-prop-valid@1.2.2", "", { "dependencies": { "@emotion/memoize": "^0.8.1" } }, "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw=="],
    "@emotion/memoize": ["@emotion/memoize@0.8.1", "", {}, "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="],
    "@emotion/unitless": ["@emotion/unitless@0.8.1", "", {}, "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="],
    "@next/mdx": ["@next/mdx@15.3.2", "", { "dependencies": { "source-map": "^0.7.0" }, "peerDependencies": { "@mdx-js/loader": ">=0.15.0", "@mdx-js/react": ">=0.15.0" }, "optionalPeers": ["@mdx-js/loader", "@mdx-js/react"] }, "sha512-D6lSSbVzn1EiPwrBKG5QzXClcgdqiNCL8a3/6oROinzgZnYSxbVmnfs0UrqygtGSOmgW7sdJJSEOy555DoAwvw=="],
    "@types/ace": ["@types/ace@0.0.52", "", {}, "sha512-YPF9S7fzpuyrxru+sG/rrTpZkC6gpHBPF14W3x70kqVOD+ks6jkYLapk4yceh36xej7K4HYxcyz9ZDQ2lTvwgQ=="],
    "@types/bun": ["@types/bun@1.2.13", "", { "dependencies": { "bun-types": "1.2.13" } }, "sha512-u6vXep/i9VBxoJl3GjZsl/BFIsvML8DfVDO0RYLEwtSZSp981kEO1V5NwRcO1CPJ7AmvpbnDCiMKo3JvbDEjAg=="],
    "@types/hast": ["@types/hast@2.3.10", "", { "dependencies": { "@types/unist": "^2" } }, "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw=="],
    "@types/lodash": ["@types/lodash@4.17.16", "", {}, "sha512-HX7Em5NYQAXKW+1T+FiuG27NGwzJfCX3s1GjOa7ujxZa52kjJLOr4FUxT+giF6Tgxv1e+/czV/iTtBw27WTU9g=="],
    "@types/mdx": ["@types/mdx@2.0.13", "", {}, "sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw=="],
    "@types/node": ["@types/node@22.15.19", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-3vMNr4TzNQyjHcRZadojpRaD9Ofr6LsonZAoQ+HMUa/9ORTPoxVIw0e0mpqWpdjj8xybyCM+oKOUH2vwFu/oEw=="],
    "@types/react": ["@types/react@19.1.4", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-EB1yiiYdvySuIITtD5lhW4yPyJ31RkJkkDw794LaQYrxCSaQV/47y5o1FMC4zF9ZyjUjzJMZwbovEnT5yHTW6g=="],
    "@types/react-dom": ["@types/react-dom@19.1.5", "", { "peerDependencies": { "@types/react": "^19.0.0" } }, "sha512-CMCjrWucUBZvohgZxkjd6S9h0nZxXjzus6yDfUb+xLxYM7VvjKNH1tQrE9GWLql1XoOP4/Ds3bwFqShHUYraGg=="],
    "@types/stylis": ["@types/stylis@4.2.5", "", {}, "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw=="],
    "@types/unist": ["@types/unist@2.0.11", "", {}, "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="],
    "@xterm/xterm": ["@xterm/xterm@5.5.0", "", {}, "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A=="],
    "body-scroll-lock": ["body-scroll-lock@3.1.5", "", {}, "sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg=="],
    "bun-types": ["bun-types@1.2.13", "", { "dependencies": { "@types/node": "*" } }, "sha512-rRjA1T6n7wto4gxhAO/ErZEtOXyEZEmnIHQfl0Dt1QQSB4QV0iP6BZ9/YB5fZaHFQ2dwHFrmPaRQ9GGMX01k9Q=="],
    "camelize": ["camelize@1.0.1", "", {}, "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ=="],
    "character-entities": ["character-entities@1.2.4", "", {}, "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw=="],
    "character-entities-legacy": ["character-entities-legacy@1.1.4", "", {}, "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA=="],
    "character-reference-invalid": ["character-reference-invalid@1.1.4", "", {}, "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg=="],
    "classnames": ["classnames@2.5.1", "", {}, "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="],
    "comma-separated-tokens": ["comma-separated-tokens@1.0.8", "", {}, "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw=="],
    "css-color-keywords": ["css-color-keywords@1.0.0", "", {}, "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg=="],
    "css-to-react-native": ["css-to-react-native@3.2.0", "", { "dependencies": { "camelize": "^1.0.0", "css-color-keywords": "^1.0.0", "postcss-value-parser": "^4.0.2" } }, "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ=="],
    "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
    "dom-serializer": ["dom-serializer@2.0.0", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", "entities": "^4.2.0" } }, "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg=="],
    "domelementtype": ["domelementtype@2.3.0", "", {}, "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="],
    "domhandler": ["domhandler@5.0.3", "", { "dependencies": { "domelementtype": "^2.3.0" } }, "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w=="],
    "domutils": ["domutils@3.2.2", "", { "dependencies": { "dom-serializer": "^2.0.0", "domelementtype": "^2.3.0", "domhandler": "^5.0.3" } }, "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw=="],
    "entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="],
    "fault": ["fault@1.0.4", "", { "dependencies": { "format": "^0.2.0" } }, "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA=="],
    "format": ["format@0.2.2", "", {}, "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww=="],
    "hast-util-parse-selector": ["hast-util-parse-selector@2.2.5", "", {}, "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ=="],
    "hastscript": ["hastscript@6.0.0", "", { "dependencies": { "@types/hast": "^2.0.0", "comma-separated-tokens": "^1.0.0", "hast-util-parse-selector": "^2.0.0", "property-information": "^5.0.0", "space-separated-tokens": "^1.0.0" } }, "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w=="],
    "highlight.js": ["highlight.js@10.7.3", "", {}, "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A=="],
    "highlightjs-vue": ["highlightjs-vue@1.0.0", "", {}, "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA=="],
    "html-to-react": ["html-to-react@1.7.0", "", { "dependencies": { "domhandler": "^5.0", "htmlparser2": "^9.0", "lodash.camelcase": "^4.3.0" }, "peerDependencies": { "react": "^0.13.0 || ^0.14.0 || >=15" } }, "sha512-b5HTNaTGyOj5GGIMiWVr1k57egAZ/vGy0GGefnCQ1VW5hu9+eku8AXHtf2/DeD95cj/FKBKYa1J7SWBOX41yUQ=="],
    "htmlparser2": ["htmlparser2@9.1.0", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.3", "domutils": "^3.1.0", "entities": "^4.5.0" } }, "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ=="],
    "is-alphabetical": ["is-alphabetical@1.0.4", "", {}, "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg=="],
    "is-alphanumerical": ["is-alphanumerical@1.0.4", "", { "dependencies": { "is-alphabetical": "^1.0.0", "is-decimal": "^1.0.0" } }, "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A=="],
    "is-decimal": ["is-decimal@1.0.4", "", {}, "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw=="],
    "is-hexadecimal": ["is-hexadecimal@1.0.4", "", {}, "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw=="],
    "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
    "lodash": ["lodash@4.17.21", "", {}, "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="],
    "lodash.camelcase": ["lodash.camelcase@4.3.0", "", {}, "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA=="],
    "loose-envify": ["loose-envify@1.4.0", "", { "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, "bin": { "loose-envify": "cli.js" } }, "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="],
    "lowlight": ["lowlight@1.20.0", "", { "dependencies": { "fault": "^1.0.0", "highlight.js": "~10.7.0" } }, "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw=="],
    "lucide-react": ["lucide-react@0.511.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-VK5a2ydJ7xm8GvBeKLS9mu1pVK6ucef9780JVUjw6bAjJL/QXnd4Y0p7SPeOUMC27YhzNCZvm5d/QX0Tp3rc0w=="],
    "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
    "parse-entities": ["parse-entities@2.0.0", "", { "dependencies": { "character-entities": "^1.0.0", "character-entities-legacy": "^1.0.0", "character-reference-invalid": "^1.0.0", "is-alphanumerical": "^1.0.0", "is-decimal": "^1.0.0", "is-hexadecimal": "^1.0.0" } }, "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ=="],
    "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
    "postcss": ["postcss@8.5.3", "", { "dependencies": { "nanoid": "^3.3.8", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A=="],
    "postcss-value-parser": ["postcss-value-parser@4.2.0", "", {}, "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="],
    "prismjs": ["prismjs@1.30.0", "", {}, "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw=="],
    "property-information": ["property-information@5.6.0", "", { "dependencies": { "xtend": "^4.0.0" } }, "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA=="],
    "react": ["react@19.1.0", "", {}, "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg=="],
    "react-code-blocks": ["react-code-blocks@0.1.6", "", { "dependencies": { "@babel/runtime": "^7.10.4", "react-syntax-highlighter": "^15.5.0", "styled-components": "^6.1.0", "tslib": "^2.6.0" }, "peerDependencies": { "react": ">=16" } }, "sha512-ENNuxG07yO+OuX1ChRje3ieefPRz6yrIpHmebQlaFQgzcAHbUfVeTINpOpoI9bSRSObeYo/OdHsporeToZ7fcg=="],
    "react-dom": ["react-dom@18.3.1", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" }, "peerDependencies": { "react": "^18.3.1" } }, "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw=="],
    "react-responsive-modal": ["react-responsive-modal@6.4.2", "", { "dependencies": { "@bedrock-layout/use-forwarded-ref": "^1.3.1", "body-scroll-lock": "^3.1.5", "classnames": "^2.3.1" }, "peerDependencies": { "react": "^16.8.0 || ^17 || ^18", "react-dom": "^16.8.0 || ^17 || ^18" } }, "sha512-ARjGEKE5Gu5CSvyA8U9ARVbtK4SMAtdXsjtzwtxRlQIHC99RQTnOUctLpl7+/sp1Kg1OJZ6yqvp6ivd4TBueEw=="],
    "react-syntax-highlighter": ["react-syntax-highlighter@15.6.1", "", { "dependencies": { "@babel/runtime": "^7.3.1", "highlight.js": "^10.4.1", "highlightjs-vue": "^1.0.0", "lowlight": "^1.17.0", "prismjs": "^1.27.0", "refractor": "^3.6.0" }, "peerDependencies": { "react": ">= 0.14.0" } }, "sha512-OqJ2/vL7lEeV5zTJyG7kmARppUjiB9h9udl4qHQjjgEos66z00Ia0OckwYfRxCSFrW8RJIBnsBwQsHZbVPspqg=="],
    "refractor": ["refractor@3.6.0", "", { "dependencies": { "hastscript": "^6.0.0", "parse-entities": "^2.0.0", "prismjs": "~1.27.0" } }, "sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA=="],
    "scheduler": ["scheduler@0.23.2", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ=="],
    "shallowequal": ["shallowequal@1.1.0", "", {}, "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="],
    "source-map": ["source-map@0.7.4", "", {}, "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA=="],
    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
    "space-separated-tokens": ["space-separated-tokens@1.1.5", "", {}, "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA=="],
    "styled-components": ["styled-components@6.1.18", "", { "dependencies": { "@emotion/is-prop-valid": "1.2.2", "@emotion/unitless": "0.8.1", "@types/stylis": "4.2.5", "css-to-react-native": "3.2.0", "csstype": "3.1.3", "postcss": "8.4.49", "shallowequal": "1.1.0", "stylis": "4.3.2", "tslib": "2.6.2" }, "peerDependencies": { "react": ">= 16.8.0", "react-dom": ">= 16.8.0" } }, "sha512-Mvf3gJFzZCkhjY2Y/Fx9z1m3dxbza0uI9H1CbNZm/jSHCojzJhQ0R7bByrlFJINnMzz/gPulpoFFGymNwrsMcw=="],
    "stylis": ["stylis@4.3.2", "", {}, "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg=="],
    "tailwind-merge": ["tailwind-merge@3.3.0", "", {}, "sha512-fyW/pEfcQSiigd5SNn0nApUOxx0zB/dm6UDU/rEwc2c3sX2smWUNbapHv+QRqLGVp9GWX3THIa7MUGPo+YkDzQ=="],
    "tailwindcss": ["tailwindcss@4.1.7", "", {}, "sha512-kr1o/ErIdNhTz8uzAYL7TpaUuzKIE6QPQ4qmSdxnoX/lo+5wmUHQA6h3L5yIqEImSRnAAURDirLu/BgiXGPAhg=="],
    "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
    "typescript": ["typescript@5.8.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ=="],
    "undici-types": ["undici-types@6.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="],
    "xtend": ["xtend@4.0.2", "", {}, "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="],
    "refractor/prismjs": ["prismjs@1.27.0", "", {}, "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA=="],
    "styled-components/postcss": ["postcss@8.4.49", "", { "dependencies": { "nanoid": "^3.3.7", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA=="],
    "styled-components/tslib": ["tslib@2.6.2", "", {}, "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="],
  }
 }
--- a/src/components/lib/composites/docs/TWUIDocsAside.tsx
+++ b/src/components/lib/composites/docs/TWUIDocsAside.tsx
@ -0,0 +1,41 @@
 import { DetailedHTMLProps, HTMLAttributes } from "react";
 import { DocsLinkType } from ".";
 import Stack from "../../layout/Stack";
 import TWUIDocsLink from "./TWUIDocsLink";
 import { twMerge } from "tailwind-merge";
 type Props = DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> & {
    DocsLinks: DocsLinkType[];
    before?: React.ReactNode;
    after?: React.ReactNode;
    autoExpandAll?: boolean;
 };
 export default function TWUIDocsAside({
    DocsLinks,
    after,
    before,
    autoExpandAll,
    ...props
 }: Props) {
    return (
        <aside
            {...props}
            className={twMerge(
                "pb-10 hidden xl:flex sticky top-6",
                props.className,
            )}
        >
            <Stack>
                {before}
                {DocsLinks.map((link, index) => (
                    <TWUIDocsLink
                        docLink={link}
                        key={index}
                        autoExpandAll={autoExpandAll}
                    />
                ))}
                {after}
            </Stack>
        </aside>
    );
 }
--- a/src/components/lib/composites/docs/TWUIDocsLink.tsx
+++ b/src/components/lib/composites/docs/TWUIDocsLink.tsx
@ -0,0 +1,128 @@
 import React, {
    AnchorHTMLAttributes,
    ComponentProps,
    DetailedHTMLProps,
 } from "react";
 import { DocsLinkType } from ".";
 import Stack from "../../layout/Stack";
 import { twMerge } from "tailwind-merge";
 import Row from "../../layout/Row";
 import Divider from "../../layout/Divider";
 import { ChevronDown, Circle } from "lucide-react";
 import Button from "../../layout/Button";
 type Props = DetailedHTMLProps<
    AnchorHTMLAttributes<HTMLAnchorElement>,
    HTMLAnchorElement
 > & {
    docLink: DocsLinkType;
    wrapperProps?: ComponentProps<typeof Stack>;
    strict?: boolean;
    childWrapperProps?: ComponentProps<typeof Stack>;
    autoExpandAll?: boolean;
    child?: boolean;
 };
 /**
 * # TWUI Docs Left Aside Link
 * @note use dataset attribute `data-strict` for strict matching
 *
 * @className `twui-docs-left-aside-link`
 */
 export default function TWUIDocsLink({
    docLink,
    wrapperProps,
    childWrapperProps,
    strict,
    autoExpandAll,
    child,
    ...props
 }: Props) {
    const [isActive, setIsActive] = React.useState(false);
    const [expand, setExpand] = React.useState(autoExpandAll || false);
    const linkRef = React.useRef<HTMLAnchorElement>(null);
    React.useEffect(() => {
        if (typeof window !== "undefined") {
            const basePathMatch = window.location.pathname.includes(
                docLink.href
            );
            const isStrictMatch = Boolean(
                linkRef.current?.getAttribute("data-strict")
            );
            if (strict || isStrictMatch) {
                setIsActive(window.location.pathname === docLink.href);
            } else {
                setIsActive(basePathMatch);
            }
            if (basePathMatch) {
                setExpand(true);
            }
        }
    }, []);
    return (
        <Stack
            className={twMerge("gap-2 w-full", wrapperProps?.className)}
            {...wrapperProps}
        >
            <Row className="flex-nowrap grow justify-between w-full">
                {child && <Circle size={6} />}
                <a
                    href={docLink.href}
                    title={docLink.title}
                    {...props}
                    className={twMerge(
                        "twui-docs-left-aside-link whitespace-nowrap",
                        "grow overflow-hidden overflow-ellipsis",
                        isActive ? "active" : "",
                        props.className
                    )}
                    ref={linkRef}
                    data-strict={strict || docLink.strict}
                >
                    {docLink.title}
                </a>
                {docLink.children?.[0] && (
                    <Button
                        variant="ghost"
                        color="gray"
                        className={twMerge(
                            "p-1 hover:opacity-100",
                            expand ? "rotate-180 opacity-30" : "opacity-70"
                        )}
                        onClick={() => setExpand(!expand)}
                        title="Docs Aside Links Dropdown Button"
                    >
                        <ChevronDown className="text-slate-500" size={20} />
                    </Button>
                )}
            </Row>
            {docLink.children && expand && (
                <Row className="items-stretch gap-4 grow w-full flex-nowrap">
                    <Stack
                        className={twMerge(
                            "gap-2 w-full pl-3",
                            childWrapperProps?.className
                        )}
                        {...childWrapperProps}
                    >
                        {docLink.children.map((link, index) => (
                            <TWUIDocsLink
                                key={index}
                                docLink={link}
                                className="opacity-70"
                                autoExpandAll={autoExpandAll}
                                child
                            />
                        ))}
                    </Stack>
                </Row>
            )}
        </Stack>
    );
 }
--- a/src/components/lib/composites/docs/TWUIDocsRightAside.tsx
+++ b/src/components/lib/composites/docs/TWUIDocsRightAside.tsx
@ -0,0 +1,177 @@
 import React, { DetailedHTMLProps, HTMLAttributes } from "react";
 import { DocsLinkType } from ".";
 import Stack from "../../layout/Stack";
 import TWUIDocsLink from "./TWUIDocsLink";
 import { twMerge } from "tailwind-merge";
 import Span from "../../layout/Span";
 import Row from "../../layout/Row";
 import { ArrowUpRight, LinkIcon, ListIcon } from "lucide-react";
 import Link from "../../layout/Link";
 type Props = DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> & {
    before?: React.ReactNode;
    after?: React.ReactNode;
    autoExpandAll?: boolean;
    editPageURL?: string;
 };
 export default function TWUIDocsRightAside({
    after,
    before,
    autoExpandAll,
    editPageURL,
    ...props
 }: Props) {
    const [links, setLinks] = React.useState<DocsLinkType[]>([]);
    const [ready, setReady] = React.useState(false);
    React.useEffect(() => {
        if (!ready) return;
        const headerHrefs = document.querySelectorAll(
            ".twui-docs-header-anchor"
        );
        const linksArr: DocsLinkType[] = [];
        for (let i = 0; i < headerHrefs.length; i++) {
            const anchorEl = headerHrefs[i] as HTMLAnchorElement;
            const isH2Element = anchorEl.querySelector("h2") !== null;
            if (isH2Element) {
                let newLink: DocsLinkType = {
                    title: anchorEl.textContent || "",
                    href: `#${anchorEl.id}`,
                };
                let nexElIndex = i + 1;
                while (nexElIndex < headerHrefs.length) {
                    const nextElement = headerHrefs[
                        nexElIndex
                    ] as HTMLAnchorElement;
                    const nextElementH3 = nextElement.querySelector("h3");
                    const isNextElementH2 =
                        nextElement.querySelector("h2") !== null;
                    if (isNextElementH2) {
                        break;
                    }
                    if (!nextElementH3) {
                        break;
                    }
                    if (!newLink.children) {
                        newLink.children = [];
                    }
                    newLink.children.push({
                        title: nextElementH3.textContent || "",
                        href: `#${nextElement.id}`,
                    });
                    nexElIndex++;
                }
                linksArr.push(newLink);
            }
        }
        setLinks(linksArr);
    }, [ready]);
    React.useEffect(() => {
        if (!links.length) return;
        const headerHrefs = document.querySelectorAll(
            "a.twui-docs-header-anchor"
        );
        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    const id = entry.target.id;
                    const link = document.querySelector(
                        `.twui-docs-right-aside a[href="#${id}"]`
                    );
                    if (link) {
                        link.classList.add("active");
                    }
                } else {
                    const id = entry.target.id;
                    const link = document.querySelector(
                        `.twui-docs-right-aside a[href="#${id}"]`
                    );
                    if (link) {
                        link.classList.remove("active");
                    }
                }
            });
        });
        headerHrefs.forEach((headerHref) => {
            observer.observe(headerHref);
        });
    }, [links]);
    React.useEffect(() => {
        setTimeout(() => {
            setReady(true);
        }, 100);
    }, []);
    return (
        <aside
            {...props}
            className={twMerge(
                "pb-10 hidden xl:flex min-w-[150px] max-w-[200px]",
                "sticky top-6 twui-docs-right-aside",
                props.className
            )}
        >
            <Stack className="w-full overflow-hidden">
                {before}
                <Stack className="w-full">
                    <Row>
                        <ListIcon size={12} opacity={0.5} />
                        <Span size="smaller" variant="faded">
                            On this page
                        </Span>
                    </Row>
                    {links.map((link, index) => (
                        <TWUIDocsLink
                            docLink={link}
                            key={index}
                            autoExpandAll
                            childWrapperProps={{
                                className: "pl-2",
                            }}
                            wrapperProps={{
                                className:
                                    "[&_svg]:hidden [&_a]:text-xs [&_a]:overflow-hidden [&_a]:overflow-ellipsis",
                            }}
                        />
                    ))}
                </Stack>
                {after}
                {editPageURL && (
                    <Link
                        href={editPageURL}
                        target="_blank"
                        className="text-[12px] mt-2"
                    >
                        <Row className="gap-2">
                            <LinkIcon size={12} opacity={0.5} />
                            <span>Edit This Page</span>
                            <ArrowUpRight size={15} className="-ml-1" />
                        </Row>
                    </Link>
                )}
            </Stack>
        </aside>
    );
 }
--- a/src/components/lib/composites/docs/index.tsx
+++ b/src/components/lib/composites/docs/index.tsx
@ -0,0 +1,88 @@
 import {
    ComponentProps,
    DetailedHTMLProps,
    HTMLAttributes,
    PropsWithChildren,
 } from "react";
 import Stack from "../../layout/Stack";
 import Container from "../../layout/Container";
 import Row from "../../layout/Row";
 import TWUIDocsAside from "./TWUIDocsAside";
 import { twMerge } from "tailwind-merge";
 import Paper from "../../elements/Paper";
 import TWUIDocsRightAside from "./TWUIDocsRightAside";
 export type DocsLinkType = {
    title: string;
    href: string;
    strict?: boolean;
    children?: DocsLinkType[];
    editPage?: string;
 };
 type Props = PropsWithChildren & {
    DocsLinks: DocsLinkType[];
    docsAsideBefore?: React.ReactNode;
    docsAsideAfter?: React.ReactNode;
    wrapperProps?: ComponentProps<typeof Stack>;
    docsContentProps?: ComponentProps<typeof Row>;
    leftAsideProps?: DetailedHTMLProps<
        HTMLAttributes<HTMLElement>,
        HTMLElement
    >;
    autoExpandAll?: boolean;
    editPageURL?: string;
 };
 /**
 * # TWUI Docs
 * @className `twui-docs-content`
 */
 export default function TWUIDocs({
    children,
    DocsLinks,
    docsAsideAfter,
    docsAsideBefore,
    wrapperProps,
    docsContentProps,
    leftAsideProps,
    autoExpandAll,
    editPageURL,
 }: Props) {
    return (
        <Stack
            center
            {...wrapperProps}
            className={twMerge("w-full px-4 sm:px-6", wrapperProps?.className)}
        >
            <Container>
                <Paper className="xl:p-8 mobile-paper-hidden">
                    <Row
                        {...docsContentProps}
                        className={twMerge(
                            "items-start gap-8 w-full flex-nowrap",
                            docsContentProps?.className
                        )}
                    >
                        <TWUIDocsAside
                            DocsLinks={DocsLinks}
                            after={docsAsideAfter}
                            before={docsAsideBefore}
                            autoExpandAll={autoExpandAll}
                            {...leftAsideProps}
                        />
                        <div
                            className={twMerge(
                                "block twui-docs-content pl-0 xl:pl-6 grow",
                                "overflow-hidden"
                            )}
                        >
                            {children}
                        </div>
                        <TWUIDocsRightAside editPageURL={editPageURL} />
                    </Row>
                </Paper>
            </Container>
        </Stack>
    );
 }
--- a/src/components/lib/editors/AceEditor.tsx
+++ b/src/components/lib/editors/AceEditor.tsx
@ -0,0 +1,172 @@
 import React, { MutableRefObject } from "react";
 import { twMerge } from "tailwind-merge";
 import AceEditorModes from "./ace-editor-modes";
 import { AceEditorOptions } from "@moduletrace/datasquirel/dist/package-shared/types";
 export type AceEditorComponentType = {
    editorRef?: MutableRefObject<AceAjax.Editor | undefined>;
    readOnly?: boolean;
    /** Function to call when Ctrl+Enter is pressed */
    ctrlEnterFn?: (editor: AceAjax.Editor) => void;
    content?: string;
    placeholder?: string;
    title?: string;
    mode?: (typeof AceEditorModes)[number];
    fontSize?: string;
    previewMode?: boolean;
    onChange?: (value: string) => void;
    delay?: number;
    wrapperProps?: React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLDivElement>,
        HTMLDivElement
    >;
    refreshDepArr?: any[];
    editorOptions?: AceEditorOptions;
    showLabel?: boolean;
 };
 let timeout: any;
 /**
 * # Powerful Ace Editor
 * @note **NOTE** head scripts required
 * @script `https://cdnjs.cloudflare.com/ajax/libs/ace/1.22.0/ace.min.js`
 * @script `https://cdnjs.cloudflare.com/ajax/libs/ace/1.22.0/ext-language_tools.min.js`
 */
 export default function AceEditor({
    editorRef,
    readOnly,
    ctrlEnterFn,
    content = "",
    placeholder,
    mode,
    fontSize,
    previewMode,
    onChange,
    delay = 500,
    refreshDepArr,
    wrapperProps,
    editorOptions,
    showLabel,
    title,
 }: AceEditorComponentType) {
    try {
        const editorElementRef = React.useRef<HTMLDivElement>();
        const editorRefInstance = React.useRef<AceAjax.Editor>();
        const [refresh, setRefresh] = React.useState(0);
        const [darkMode, setDarkMode] = React.useState(false);
        const [ready, setReady] = React.useState(false);
        React.useEffect(() => {
            if (!ready) return;
            if (!ace?.edit || !editorElementRef.current) {
                setTimeout(() => {
                    setRefresh((prev) => prev + 1);
                }, 1000);
                return;
            }
            const editor = ace.edit(editorElementRef.current);
            editor.setOptions({
                mode: `ace/mode/${mode ? mode : "javascript"}`,
                theme: darkMode
                    ? "ace/theme/tomorrow_night_eighties"
                    : "ace/theme/ace_light",
                value: (() => {
                    try {
                        return JSON.stringify(JSON.parse(content), null, 4);
                    } catch (error) {
                        return content;
                    }
                })(),
                placeholder: placeholder ? placeholder : "",
                enableBasicAutocompletion: true,
                enableLiveAutocompletion: true,
                readOnly: readOnly ? true : false,
                fontSize: fontSize ? fontSize : null,
                showLineNumbers: previewMode ? false : true,
                wrap: true,
                wrapMethod: "code",
                ...editorOptions,
            });
            editor.commands.addCommand({
                name: "myCommand",
                bindKey: { win: "Ctrl-Enter", mac: "Command-Enter" },
                exec: function (editor) {
                    if (ctrlEnterFn) ctrlEnterFn(editor);
                },
                readOnly: true,
            });
            editor.getSession().on("change", function (e) {
                if (onChange) {
                    clearTimeout(timeout);
                    setTimeout(() => {
                        try {
                            onChange(editor.getValue());
                        } catch (error) {}
                    }, delay);
                }
            });
            editorRefInstance.current = editor;
            if (editorRef) editorRef.current = editor;
            return function () {
                editor.destroy();
            };
        }, [refresh, darkMode, ready, mode, ...(refreshDepArr || [])]);
        React.useEffect(() => {
            const htmlClassName = document.documentElement.className;
            if (htmlClassName.match(/dark/i)) setDarkMode(true);
            setTimeout(() => {
                setReady(true);
            }, 200);
        }, []);
        return (
            <React.Fragment>
                <div
                    {...wrapperProps}
                    className={twMerge(
                        "w-full h-[400px] block rounded-default",
                        "border border-slate-200 border-solid relative",
                        "dark:border-white/20",
                        showLabel && title ? "pt-4" : "",
                        wrapperProps?.className,
                    )}
                >
                    {showLabel && title ? (
                        <label
                            className={twMerge(
                                "bg-background-light dark:bg-background-dark text-xs",
                                "-top-3 left-2 px-2 py-1 absolute z-10",
                            )}
                        >
                            {title}
                        </label>
                    ) : null}
                    <div
                        ref={editorElementRef as any}
                        className="w-full h-full"
                    ></div>
                </div>
            </React.Fragment>
        );
    } catch (error: any) {
        return (
            <React.Fragment>
                <span className="m-0">
                    Editor Error:{" "}
                    <b className="text-red-600">{error.message}</b>
                </span>
            </React.Fragment>
        );
    }
 }
--- a/src/components/lib/editors/TinyMCE/index.tsx
+++ b/src/components/lib/editors/TinyMCE/index.tsx
@ -0,0 +1,237 @@
 import React, { ComponentProps, MutableRefObject } from "react";
 import { RawEditorOptions, TinyMCE, Editor } from "./tinymce";
 import { twMerge } from "tailwind-merge";
 import twuiSlugToNormalText from "../../utils/slug-to-normal-text";
 import Border from "../../elements/Border";
 import useTinyMCE from "./useTinyMCE";
 export type TinyMCEEditorProps<KeyType extends string> = {
    options?: RawEditorOptions;
    editorRef?: React.MutableRefObject<Editor | null>;
    setEditor?: React.Dispatch<React.SetStateAction<Editor>>;
    wrapperProps?: React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLDivElement>,
        HTMLDivElement
    >;
    wrapperWrapperProps?: React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLDivElement>,
        HTMLDivElement
    >;
    borderProps?: ComponentProps<typeof Border>;
    defaultValue?: string;
    name?: KeyType;
    changeHandler?: (content: string) => void;
    showLabel?: boolean;
    useParentCSS?: boolean;
    placeholder?: string;
    refreshDependencyArray?: any[];
 };
 /**
 * # Tiny MCE Editor Component
 * @className_wrapper twui-rte-wrapper
 */
 export default function TinyMCEEditor<KeyType extends string>({
    options,
    editorRef: passedEditorRef,
    setEditor: passedSetEditor,
    wrapperProps,
    defaultValue,
    changeHandler,
    wrapperWrapperProps,
    borderProps,
    name,
    showLabel,
    useParentCSS,
    placeholder,
    refreshDependencyArray,
 }: TinyMCEEditorProps<KeyType>) {
    const { tinyMCE } = useTinyMCE();
    const editorComponentRef = React.useRef<HTMLDivElement>(null);
    const editorRef: MutableRefObject<Editor | null> =
        passedEditorRef || React.useRef(null);
    const EDITOR_VALUE_CHANGE_TIMEOUT = 500;
    const FINAL_HEIGHT = options?.height || 500;
    const [themeReady, setThemeReady] = React.useState(false);
    const [ready, setReady] = React.useState(false);
    const [darkMode, setDarkMode] = React.useState(false);
    const [refresh, setRefresh] = React.useState(0);
    const [editor, setEditor] = React.useState<Editor>();
    const title = name ? twuiSlugToNormalText(name) : "Rich Text";
    React.useEffect(() => {
        if (!tinyMCE) {
            return;
        }
        const htmlClassName = document.documentElement.className;
        if (htmlClassName.match(/dark/i)) setDarkMode(true);
        setTimeout(() => {
            setThemeReady(true);
        }, 200);
    }, [tinyMCE]);
    let valueTimeout: any;
    const id = crypto.randomUUID();
    React.useEffect(() => {
        if (!editorComponentRef.current || !themeReady || !tinyMCE) {
            return;
        }
        const baseUrl = "https://www.datasquirel.com/tinymce-public";
        tinyMCE.init({
            height: FINAL_HEIGHT,
            menubar: false,
            plugins:
                "advlist lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table code help wordcount",
            toolbar:
                "undo redo | blocks | bold italic underline link image | bullist numlist outdent indent | removeformat code searchreplace wordcount preview insertdatetime",
            content_style:
                "body { font-family:Helvetica,Arial,sans-serif; font-size:14px; background-color: transparent }",
            init_instance_callback: (editor) => {
                setEditor(editor as any);
                if (editorRef) {
                    editorRef.current = editor;
                    passedSetEditor?.(editor);
                }
                if (defaultValue) editor.setContent(defaultValue);
                setReady(true);
                // editor.on("change", (e) => {
                //     changeHandler?.(editor.getContent());
                // });
                editor.on("input", (e) => {
                    if (changeHandler) {
                        window.clearTimeout(valueTimeout);
                        valueTimeout = setTimeout(() => {
                            changeHandler(editor.getContent());
                        }, EDITOR_VALUE_CHANGE_TIMEOUT);
                    }
                });
                if (useParentCSS) {
                    useParentStyles(editor);
                }
            },
            base_url: baseUrl,
            body_class: "twui-tinymce",
            placeholder,
            relative_urls: true,
            remove_script_host: true,
            convert_urls: false,
            ...options,
            license_key: "gpl",
            target: editorComponentRef.current,
            content_css: darkMode ? "dark" : undefined,
            skin: darkMode ? "oxide-dark" : undefined,
        });
        return function () {
            if (!ready) return;
            const instance = editorComponentRef.current
                ? tinyMCE?.get(editorComponentRef.current?.id)
                : undefined;
            instance?.remove();
        };
    }, [tinyMCE, themeReady, refresh, ...(refreshDependencyArray || [])]);
    React.useEffect(() => {
        const instance = editorRef.current;
        if (instance) {
            instance.setContent(defaultValue || "");
        }
    }, [defaultValue]);
    return (
        <div
            {...wrapperWrapperProps}
            className={twMerge(
                "relative w-full [&_.tox-tinymce]:!border-none",
                "bg-background-light dark:bg-background-dark",
                wrapperWrapperProps?.className,
            )}
            onInput={(e) => {
                console.log(`Input Detected`);
            }}
        >
            {showLabel && (
                <label
                    className={twMerge(
                        "absolute z-10 -top-[7px] left-[10px] px-2 text-xs",
                        "bg-background-light dark:bg-background-dark text-gray-500",
                        "dark:text-white/80 rounded",
                    )}
                    htmlFor={id}
                >
                    {title}
                </label>
            )}
            <Border
                {...borderProps}
                className={twMerge(
                    "dark:border-white/30 p-0 pt-2",
                    borderProps?.className,
                )}
            >
                <div
                    {...wrapperProps}
                    ref={editorComponentRef}
                    style={{
                        height:
                            String(FINAL_HEIGHT).replace(/[^\d]/g, "") + "px",
                        ...wrapperProps?.style,
                    }}
                    className={twMerge(
                        "bg-slate-200 dark:bg-slate-700 rounded-sm w-full",
                        "twui-rte-wrapper",
                    )}
                    id={id}
                ></div>
            </Border>
        </div>
    );
 }
 function useParentStyles(editor: Editor) {
    const doc = editor.getDoc();
    const parentStylesheets = document.styleSheets;
    for (const sheet of parentStylesheets) {
        try {
            if (sheet.href) {
                const link = doc.createElement("link");
                link.rel = "stylesheet";
                link.href = sheet.href;
                doc.head.appendChild(link);
            } else {
                const rules = sheet.cssRules || sheet.rules;
                if (rules) {
                    const style = doc.createElement("style");
                    for (const rule of rules) {
                        try {
                            style.appendChild(doc.createTextNode(rule.cssText));
                        } catch (e) {
                            console.warn("Could not copy CSS rule:", rule, e);
                        }
                    }
                    doc.head.appendChild(style);
                }
            }
        } catch (e) {
            console.warn("Error processing stylesheet:", sheet, e);
        }
    }
 }
--- a/src/components/lib/editors/TinyMCE/tinymce.d.ts
+++ b/src/components/lib/editors/TinyMCE/tinymce.d.ts
--- a/src/components/lib/editors/TinyMCE/useTinyMCE.tsx
+++ b/src/components/lib/editors/TinyMCE/useTinyMCE.tsx
@ -0,0 +1,50 @@
 import React from "react";
 import { TinyMCE } from "./tinymce";
 let interval: any;
 export default function useTinyMCE() {
    const [tinyMCE, setTinyMCE] = React.useState<TinyMCE>();
    const [refresh, setRefresh] = React.useState(0);
    const [scriptLoaded, setScriptLoaded] = React.useState(false);
    React.useEffect(() => {
        if (refresh >= 5) return;
        const clientWindow = window as Window & { tinymce?: TinyMCE };
        if (clientWindow.tinymce) {
            setScriptLoaded(true);
            return;
        }
        const script = document.createElement("script");
        const baseUrl = "https://www.datasquirel.com/tinymce-public";
        script.src = `${baseUrl}/tinymce.min.js`;
        script.async = true;
        script.onload = () => {
            setScriptLoaded(true);
        };
        document.head.appendChild(script);
    }, [refresh]);
    React.useEffect(() => {
        if (!scriptLoaded) return;
        const clientWindow = window as Window & { tinymce?: TinyMCE };
        let tinyMCE = clientWindow.tinymce;
        if (tinyMCE) {
            setTinyMCE(tinyMCE);
        } else {
            setRefresh((prev) => prev + 1);
        }
    }, [scriptLoaded]);
    return { tinyMCE };
 }
--- a/src/components/lib/editors/ace-editor-modes.ts
+++ b/src/components/lib/editors/ace-editor-modes.ts
@ -0,0 +1,125 @@
 const AceEditorModes = [
    "abap",
    "abc",
    "actionscript",
    "ada",
    "apache_conf",
    "asciidoc",
    "assembly_x86",
    "autohotkey",
    "batchfile",
    "c9search",
    "c_cpp",
    "cirru",
    "clojure",
    "cobol",
    "coffee",
    "coldfusion",
    "csharp",
    "css",
    "curly",
    "d",
    "dart",
    "diff",
    "dockerfile",
    "dot",
    "dummy",
    "dummysyntax",
    "eiffel",
    "ejs",
    "elixir",
    "elm",
    "erlang",
    "forth",
    "ftl",
    "gcode",
    "gherkin",
    "gitignore",
    "glsl",
    "golang",
    "groovy",
    "haml",
    "handlebars",
    "haskell",
    "haxe",
    "html",
    "html_ruby",
    "ini",
    "io",
    "jack",
    "jade",
    "java",
    "javascript",
    "json",
    "jsoniq",
    "jsp",
    "jsx",
    "julia",
    "latex",
    "less",
    "liquid",
    "lisp",
    "livescript",
    "logiql",
    "lsl",
    "lua",
    "luapage",
    "lucene",
    "makefile",
    "markdown",
    "mask",
    "matlab",
    "mel",
    "mushcode",
    "mysql",
    "nix",
    "objectivec",
    "ocaml",
    "pascal",
    "perl",
    "pgsql",
    "php",
    "powershell",
    "praat",
    "prolog",
    "properties",
    "protobuf",
    "python",
    "r",
    "rdoc",
    "rhtml",
    "ruby",
    "rust",
    "sass",
    "scad",
    "scala",
    "scheme",
    "scss",
    "sh",
    "sjs",
    "smarty",
    "snippets",
    "soy_template",
    "space",
    "sql",
    "stylus",
    "svg",
    "tcl",
    "tex",
    "text",
    "textile",
    "toml",
    "twig",
    "typescript",
    "vala",
    "vbscript",
    "velocity",
    "verilog",
    "vhdl",
    "xml",
    "xquery",
    "yaml",
    "shell",
 ] as const;
 export default AceEditorModes;
--- a/src/components/lib/elements/Border.tsx
+++ b/src/components/lib/elements/Border.tsx
@ -0,0 +1,42 @@
 import { DetailedHTMLProps, HTMLAttributes, RefObject } from "react";
 import { twMerge } from "tailwind-merge";
 export type TWUI_BORDER_PROPS = DetailedHTMLProps<
    HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
 > & {
    spacing?: "normal" | "loose" | "tight" | "wide" | "tightest";
    componentRef?: RefObject<HTMLDivElement>;
 };
 /**
 * # Toggle Component
 * @className_wrapper twui-border
 */
 export default function Border({
    spacing,
    componentRef,
    ...props
 }: TWUI_BORDER_PROPS) {
    return (
        <div
            {...props}
            className={twMerge(
                "relative flex items-center gap-2 border border-solid rounded-default",
                "border-slate-200 dark:border-white/10",
                spacing
                    ? spacing == "normal"
                        ? "px-3 py-2"
                        : spacing == "tight"
                        ? "px-2 py-1"
                        : ""
                    : "px-3 py-2",
                "twui-border",
                props.className
            )}
            ref={componentRef}
        >
            {props.children}
        </div>
    );
 }
--- a/src/components/lib/elements/Breadcrumbs.tsx
+++ b/src/components/lib/elements/Breadcrumbs.tsx
@ -0,0 +1,228 @@
 import React, { ComponentProps, ReactNode } from "react";
 import Link from "../layout/Link";
 import Divider from "../layout/Divider";
 import Row from "../layout/Row";
 import lowerToTitleCase from "../utils/lower-to-title-case";
 import { twMerge } from "tailwind-merge";
 import { ChevronLeft } from "lucide-react";
 import Button from "../layout/Button";
 type LinkObject = {
    title: string;
    path: string;
 };
 type Props = {
    excludeRegexMatch?: RegExp;
    linkProps?: ComponentProps<typeof Link>;
    currentLinkProps?: ComponentProps<typeof Link>;
    dividerProps?: ComponentProps<typeof Divider>;
    backButtonProps?: ComponentProps<typeof Button>;
    backButton?: boolean;
    pageUrl?: string;
    currentTitle?: string;
    skipHome?: boolean;
    divider?: ReactNode;
 };
 /**
 * # TWUI Breadcrumbs
 * @className `twui-breadcrumb-link`
 * @className `twui-current-breadcrumb-wrapper`
 * @className `twui-breadcrumbs-divider`
 * @className `twui-breadcrumbs-back-button`
 */
 export default function Breadcrumbs({
    excludeRegexMatch,
    linkProps,
    currentLinkProps,
    dividerProps,
    backButton,
    backButtonProps,
    pageUrl,
    currentTitle,
    skipHome,
    divider,
 }: Props) {
    const [links, setLinks] = React.useState<LinkObject[] | null>(
        pageUrl
            ? twuiBreadcrumbsGenerateLinksFromUrl({ url: pageUrl, skipHome })
            : null
    );
    React.useEffect(() => {
        if (links) return;
        let pathname = window.location.pathname;
        let validPathLinks = twuiBreadcrumbsGenerateLinksFromUrl({
            url: pathname,
            excludeRegexMatch,
            skipHome,
        });
        setLinks(validPathLinks);
        return function () {
            setLinks(null);
        };
    }, []);
    if (!links?.[1]) {
        return <React.Fragment></React.Fragment>;
    }
    return (
        <nav
            className={twMerge(
                "overflow-x-auto",
                "twui-current-breadcrumb-wrapper"
            )}
            aria-label="Breadcrumb"
        >
            <Row
                className={twMerge(
                    "gap-4 flex-nowrap whitespace-nowrap overflow-x-auto overflow-y-hidden w-full"
                )}
            >
                {backButton && (
                    <React.Fragment>
                        <Button
                            variant="ghost"
                            color="gray"
                            {...backButtonProps}
                            className={twMerge(
                                "p-1 -my-2 -mx-2",
                                "twui-breadcrumbs-back-button",
                                backButtonProps?.className
                            )}
                            onClick={(e) => {
                                window.history.back();
                                backButtonProps?.onClick?.(e);
                            }}
                            title="Breadcrumbs Back Button"
                            beforeIcon={<ChevronLeft size={20} />}
                        />
                        {divider || (
                            <Divider
                                vertical
                                className={twMerge(
                                    "twui-breadcrumbs-divider",
                                    dividerProps?.className
                                )}
                            />
                        )}
                    </React.Fragment>
                )}
                {links.map((linkObject, index, array) => {
                    const isTarget = array.length - 1 == index;
                    if (index === links.length - 1) {
                        return (
                            <Link
                                key={index}
                                href={linkObject.path}
                                {...linkProps}
                                {...(isTarget ? currentLinkProps : {})}
                                className={twMerge(
                                    "text-primary-text/50 dark:text-primary-dark-text/50 text-xs",
                                    "max-w-[200px] text-ellipsis overflow-hidden",
                                    isTarget ? "current" : "",
                                    "twui-breadcrumb-link",
                                    linkProps?.className,
                                    isTarget && currentLinkProps?.className
                                )}
                                title={
                                    currentLinkProps?.title || linkObject.title
                                }
                            >
                                {currentTitle || linkObject.title}
                            </Link>
                        );
                    } else {
                        return (
                            <React.Fragment key={index}>
                                <Link
                                    href={linkObject.path}
                                    {...linkProps}
                                    {...(isTarget ? currentLinkProps : {})}
                                    className={twMerge(
                                        "text-xs",
                                        isTarget ? "current" : "",
                                        "twui-breadcrumb-link",
                                        linkProps?.className,
                                        isTarget && currentLinkProps?.className
                                    )}
                                >
                                    {currentLinkProps?.title ||
                                        linkObject.title}
                                </Link>
                                {divider || (
                                    <Divider
                                        vertical
                                        {...dividerProps}
                                        className={twMerge(
                                            "twui-breadcrumbs-divider",
                                            dividerProps?.className
                                        )}
                                    />
                                )}
                            </React.Fragment>
                        );
                    }
                })}
            </Row>
        </nav>
    );
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
 }
 export function twuiBreadcrumbsGenerateLinksFromUrl({
    url,
    excludeRegexMatch,
    skipHome,
 }: {
    url: string;
    excludeRegexMatch?: RegExp;
    skipHome?: boolean;
 }) {
    let pathLinks = url.split("/");
    let validPathLinks = [];
    if (!skipHome) {
        validPathLinks.push({
            title: "Home",
            path: url.match(/admin/) ? "/admin" : "/",
        });
    }
    pathLinks.forEach((linkText, index, array) => {
        if (!linkText?.match(/./)) {
            return;
        }
        if (excludeRegexMatch && excludeRegexMatch.test(linkText)) return;
        validPathLinks.push({
            title: lowerToTitleCase(linkText),
            path: (() => {
                let path = "";
                for (let i = 0; i < array.length; i++) {
                    const lnText = array[i];
                    if (i > index || !lnText.match(/./)) continue;
                    path += `/${lnText}`;
                }
                return path;
            })(),
        });
    });
    return validPathLinks;
 }
--- a/src/components/lib/elements/Card.tsx
+++ b/src/components/lib/elements/Card.tsx
@ -0,0 +1,72 @@
 import React, {
    ComponentProps,
    DetailedHTMLProps,
    HTMLAttributes,
 } from "react";
 import { twMerge } from "tailwind-merge";
 import Link from "../layout/Link";
 type Props = DetailedHTMLProps<
    HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
 > & {
    variant?: "normal";
    href?: string;
    linkProps?: ComponentProps<typeof Link>;
    noHover?: boolean;
    elRef?: React.RefObject<HTMLDivElement>;
    linkRef?: React.RefObject<HTMLAnchorElement>;
 };
 /**
 * # General Card
 * @className twui-card
 * @className twui-card-link
 *
 * @info use the classname `nested-link` to prevent the card from being clickable when
 * a link (or the target element with this calss) inside the card is clicked.
 */
 export default function Card({
    href,
    variant,
    linkProps,
    noHover,
    elRef,
    linkRef,
    ...props
 }: Props) {
    const component = (
        <div
            ref={elRef}
            {...props}
            className={twMerge(
                "flex flex-row items-center p-4 rounded-default bg-background-light dark:bg-background-dark",
                "border border-slate-200 dark:border-white/10 border-solid",
                noHover ? "" : "twui-card",
                props.className
            )}
        >
            {props.children}
        </div>
    );
    if (href) {
        return (
            <Link
                ref={linkRef}
                href={href}
                {...linkProps}
                className={twMerge(
                    "cursor-pointer",
                    "twui-card",
                    "twui-card-link",
                    linkProps?.className
                )}
            >
                {component}
            </Link>
        );
    }
    return component;
 }
--- a/src/components/lib/elements/CheckBulletPoints.tsx
+++ b/src/components/lib/elements/CheckBulletPoints.tsx
@ -0,0 +1,61 @@
 import { ComponentProps, ReactNode } from "react";
 import Stack from "../layout/Stack copy";
 import Row from "../layout/Row";
 import { Check, CheckCircle, CheckCircle2 } from "lucide-react";
 import Span from "../layout/Span";
 import { twMerge } from "tailwind-merge";
 type BulletPoint = {
    title: string;
    icon?: ReactNode;
 };
 export type TWUI_CHECK_BULLET_POINTS_PROPS = ComponentProps<typeof Stack> & {
    bulletPoints: BulletPoint[];
    bulletWrapperProps?: ComponentProps<typeof Row>;
    iconProps?: ComponentProps<typeof CheckCircle2>;
    titleProps?: ComponentProps<typeof Span>;
 };
 /**
 * # Check Bullet Points Component
 * @className_wrapper twui-check-bullet-points-wrapper
 */
 export default function CheckBulletPoints({
    bulletPoints,
    bulletWrapperProps,
    iconProps,
    titleProps,
    ...props
 }: TWUI_CHECK_BULLET_POINTS_PROPS) {
    return (
        <Stack {...props} className={twMerge("gap-3", props.className)}>
            {bulletPoints.map((bulletPoint, index) => {
                return (
                    <Row
                        key={index}
                        {...bulletWrapperProps}
                        className={twMerge(
                            "gap-2 xl:flex-nowrap",
                            bulletWrapperProps?.className
                        )}
                    >
                        {bulletPoint.icon || (
                            <CheckCircle2
                                className="text-success min-w-[20px]"
                                size={20}
                                {...iconProps}
                            />
                        )}
                        <Span
                            {...titleProps}
                            className={twMerge("", titleProps?.className)}
                        >
                            {bulletPoint.title}
                        </Span>
                    </Row>
                );
            })}
        </Stack>
    );
 }
--- a/src/components/lib/elements/CodeBlock.tsx
+++ b/src/components/lib/elements/CodeBlock.tsx
@ -0,0 +1,150 @@
 import { Check, Copy } from "lucide-react";
 import React, {
    DetailedHTMLProps,
    HTMLAttributes,
    PropsWithChildren,
 } from "react";
 import { twMerge } from "tailwind-merge";
 import Stack from "../layout/Stack";
 import Row from "../layout/Row";
 import Button from "../layout/Button";
 import Divider from "../layout/Divider";
 export const TWUIPrismLanguages = ["shell", "javascript"] as const;
 type Props = PropsWithChildren &
    DetailedHTMLProps<HTMLAttributes<HTMLPreElement>, HTMLPreElement> & {
        wrapperProps?: DetailedHTMLProps<
            HTMLAttributes<HTMLDivElement>,
            HTMLDivElement
        >;
        "data-title"?: string;
        backgroundColor?: string;
        singleBlock?: boolean;
        language?: (typeof TWUIPrismLanguages)[number];
    };
 /**
 * # CodeBlock
 *
 * @className `twui-code-block-wrapper`
 * @className `twui-code-pre-wrapper`
 * @className `twui-code-block-pre`
 * @className `twui-code-block-header`
 */
 export default function CodeBlock({
    children,
    wrapperProps,
    backgroundColor,
    singleBlock,
    language,
    ...props
 }: Props) {
    const codeRef = React.useRef<HTMLDivElement>(null);
    const [copied, setCopied] = React.useState(false);
    const title = props?.["data-title"];
    const finalBackgroundColor = backgroundColor || "#28272b";
    return (
        <div
            {...wrapperProps}
            className={twMerge(
                "outline-[1px] outline-slate-200 dark:outline-white/10",
                `rounded w-full transition-all items-start`,
                "relative max-w-[80vw] sm:max-w-[85vw] xl:max-w-[880px]",
                "twui-code-block-wrapper",
                wrapperProps?.className
            )}
            style={{
                boxShadow: copied
                    ? "0 0 10px 10px rgba(18, 139, 99, 0.2)"
                    : undefined,
                backgroundColor: finalBackgroundColor,
                ...props.style,
            }}
        >
            <Stack
                className={twMerge(
                    "gap-0 w-full overflow-x-auto relative",
                    "max-h-[600px] overflow-y-auto"
                )}
            >
                <Row
                    className={twMerge(
                        "w-full px-1 h-10 sticky top-0 py-2",
                        singleBlock ? "absolute !bg-transparent" : "",
                        "twui-code-block-header"
                    )}
                    style={{
                        backgroundColor: finalBackgroundColor,
                    }}
                >
                    {title && <span className="text-white/70">{title}</span>}
                    <div className="ml-auto">
                        {copied ? (
                            <Row>
                                <span className="text-white text-xs twui-code-block-copied-text">
                                    Copied!
                                </span>
                                <div className="w-5 h-5 rounded-full bg-emerald-600 text-white flex items-center justify-center">
                                    <Check size={15} />
                                </div>
                            </Row>
                        ) : (
                            <Button
                                variant="ghost"
                                color="gray"
                                beforeIcon={<Copy size={17} color="white" />}
                                className="!p-1 !bg-transparent opacity-50"
                                onClick={() => {
                                    const content =
                                        codeRef.current?.textContent;
                                    if (!content) {
                                        window.alert("No Content to copy");
                                        return;
                                    }
                                    window.navigator.clipboard
                                        .writeText(content)
                                        .then(() => {
                                            setCopied(true);
                                            setTimeout(() => {
                                                setCopied(false);
                                            }, 3000);
                                        });
                                }}
                                title="Copy Code Snippet"
                            />
                        )}
                    </div>
                </Row>
                {!singleBlock && (
                    <Divider className="!border-white/10 sticky top-10" />
                )}
                <div
                    className={twMerge(
                        `p-1 w-full [&_pre]:!bg-transparent`,
                        singleBlock ? "" : "-mt-1",
                        "twui-code-pre-wrapper"
                    )}
                    ref={codeRef as any}
                >
                    <pre
                        {...props}
                        className={twMerge(
                            "!my-0 whitespace-pre-wrap",
                            language ? `language-${language}` : "",
                            "twui-code-block-pre",
                            props.className
                        )}
                    >
                        {children}
                    </pre>
                </div>
            </Stack>
        </div>
    );
 }
--- a/src/components/lib/elements/ColorSchemeSelector.tsx
+++ b/src/components/lib/elements/ColorSchemeSelector.tsx
@ -0,0 +1,101 @@
 import React, { DetailedHTMLProps, HTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 import { Moon, Sun } from "lucide-react";
 type Props = DetailedHTMLProps<
    HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
 > & {
    active?: boolean;
    setActive?: React.Dispatch<React.SetStateAction<boolean>>;
    iconWrapperProps?: DetailedHTMLProps<
        HTMLAttributes<HTMLDivElement>,
        HTMLDivElement
    >;
    defaultScheme?: "light" | "dark";
 };
 /**
 * # Color Scheme Loader
 * @className_wrapper twui-color-scheme-selector
 */
 export default function ColorSchemeSelector({
    active: initialActive,
    setActive: externalSetActive,
    iconWrapperProps,
    defaultScheme,
    ...props
 }: Props) {
    const [active, setActive] = React.useState(initialActive);
    React.useEffect(() => {
        const isDocumentDark =
            document.documentElement.classList.contains("dark");
        const isDocumentLight =
            document.documentElement.classList.contains("light");
        if (isDocumentDark) {
            setActive(true);
            return;
        } else if (isDocumentLight) {
            setActive(false);
            return;
        }
        const existingTheme = localStorage.getItem("theme");
        if (existingTheme === "dark") {
            setActive(true);
        } else if (existingTheme === "light") {
            setActive(false);
        } else if (defaultScheme) {
            setActive(defaultScheme == "dark" ? false : true);
        } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
            setActive(true);
        } else if (typeof active == "undefined") {
            setActive(false);
        }
    }, []);
    React.useEffect(() => {
        if (typeof active == "undefined") return;
        if (active) {
            document.documentElement.className = "dark";
            localStorage.setItem("theme", "dark");
        } else {
            document.documentElement.className = "light";
            localStorage.setItem("theme", "light");
        }
    }, [active]);
    return (
        <div
            {...props}
            className={twMerge(
                "flex flex-row items-center",
                "twui-color-scheme-selector",
                props.className
            )}
        >
            <button
                title="Color Scheme Selector Button"
                onClick={() => setActive(!active)}
                className={twMerge(
                    "cursor-pointer hover:opacity-70 flex items-center justify-center"
                )}
            >
                <div
                    {...iconWrapperProps}
                    className={twMerge(
                        "w-6 h-6 flex items-center justify-center",
                        iconWrapperProps?.className
                    )}
                >
                    {active == false && <Sun />}
                    {active == true && <Moon />}
                </div>
            </button>
        </div>
    );
 }
--- a/src/components/lib/elements/CopySlug.tsx
+++ b/src/components/lib/elements/CopySlug.tsx
@ -0,0 +1,59 @@
 import React, {
    ComponentProps,
    Dispatch,
    ReactNode,
    SetStateAction,
 } from "react";
 import { Copy, LucideProps } from "lucide-react";
 import Button from "../layout/Button";
 type Props = Omit<ComponentProps<typeof Button>, "title"> & {
    slugText: string;
    justIcon?: boolean;
    noIcon?: boolean;
    title?: string;
    outlined?: boolean;
    successMsg?: string | ReactNode;
    icon?: ReactNode;
    iconProps?: LucideProps;
    setToastOpen?: Dispatch<SetStateAction<boolean>>;
 };
 export default function CopySlug({
    slugText,
    justIcon,
    noIcon,
    title,
    outlined,
    successMsg,
    iconProps,
    icon,
    setToastOpen,
    ...props
 }: Props) {
    return (
        <Button
            title={title || slugText}
            size="smaller"
            variant="ghost"
            color="gray"
            {...props}
            onClick={(e) => {
                navigator.clipboard.writeText(slugText).then(() => {
                    setToastOpen?.(false);
                    setTimeout(() => {
                        setToastOpen?.(true);
                    }, 100);
                });
                props.onClick?.(e);
            }}
            style={{ ...(outlined ? {} : { padding: 0 }), ...props.style }}
        >
            {noIcon
                ? null
                : icon || <Copy size={outlined ? 15 : 20} {...iconProps} />}
            {!justIcon && (title ? title : "Copy Slug")}
        </Button>
    );
 }
--- a/src/components/lib/elements/Dropdown.tsx
+++ b/src/components/lib/elements/Dropdown.tsx
@ -0,0 +1,191 @@
 import React, {
    DetailedHTMLProps,
    HTMLAttributes,
    PropsWithChildren,
 } from "react";
 import { twMerge } from "tailwind-merge";
 export const TWUIDropdownContentPositions = [
    "left",
    "bottom-left",
    "top-left",
    "top",
    "bottom",
    "right",
    "bottom-right",
    "top-right",
    "center",
 ] as const;
 export type TWUI_DROPDOWN_PROPS = PropsWithChildren &
    DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
        target: React.ReactNode;
        contentWrapperProps?: DetailedHTMLProps<
            HTMLAttributes<HTMLDivElement>,
            HTMLDivElement
        >;
        targetWrapperProps?: DetailedHTMLProps<
            HTMLAttributes<HTMLDivElement>,
            HTMLDivElement
        >;
        debounce?: number;
        openDebounce?: number;
        hoverOpen?: boolean;
        above?: boolean;
        position?: (typeof TWUIDropdownContentPositions)[number];
        topOffset?: number;
        externalSetOpen?: React.Dispatch<React.SetStateAction<boolean>>;
        externalOpen?: boolean;
        keepOpen?: boolean;
        disableClickActions?: boolean;
    };
 /**
 * # Toggle Component
 * @className_wrapper twui-dropdown-wrapper
 * @className_wrapper twui-dropdown-target
 * @className_wrapper twui-dropdown-content
 *
 * @note use the class `cancel-link` to prevent popup open on click
 */
 export default function Dropdown({
    contentWrapperProps,
    targetWrapperProps,
    hoverOpen,
    above,
    debounce = 200,
    openDebounce = 200,
    target,
    position = "center",
    topOffset,
    externalSetOpen,
    keepOpen,
    disableClickActions,
    externalOpen,
    ...props
 }: TWUI_DROPDOWN_PROPS) {
    const [open, setOpen] = React.useState(externalOpen);
    let timeout: any;
    let openTimeout: any;
    const dropdownRef = React.useRef<HTMLDivElement>(null);
    const dropdownContentRef = React.useRef<HTMLDivElement>(null);
    const handleClickOutside = React.useCallback((e: MouseEvent) => {
        const targetEl = e.target as HTMLElement;
        const closestWrapper = targetEl.closest(".twui-dropdown-wrapper");
        if (!closestWrapper) {
            externalSetOpen?.(false);
            return setOpen(false);
        }
        if (closestWrapper && closestWrapper !== dropdownRef.current) {
            externalSetOpen?.(false);
            return setOpen(false);
        }
    }, []);
    React.useEffect(() => {
        if (keepOpen) return;
        document.addEventListener("click", handleClickOutside);
        return () => {
            document.removeEventListener("click", handleClickOutside);
        };
    }, []);
    React.useEffect(() => {
        setOpen(externalOpen);
    }, [externalOpen]);
    return (
        <div
            {...props}
            className={twMerge(
                "flex flex-col items-center relative",
                "twui-dropdown-wrapper",
                props.className
            )}
            onMouseEnter={() => {
                if (!hoverOpen) return;
                window.clearTimeout(timeout);
                window.clearTimeout(openTimeout);
                openTimeout = setTimeout(() => {
                    externalSetOpen?.(true);
                    setOpen(true);
                }, openDebounce);
            }}
            onMouseLeave={(e) => {
                if (!hoverOpen) return;
                window.clearTimeout(openTimeout);
                timeout = setTimeout(() => {
                    externalSetOpen?.(false);
                    setOpen(false);
                }, debounce);
            }}
            onBlur={() => {
                window.clearTimeout(timeout);
            }}
            ref={dropdownRef}
        >
            <div
                onClick={(e) => {
                    const targetEl = e.target as HTMLElement | null;
                    if (targetEl?.closest?.(".cancel-link")) return;
                    if (disableClickActions) return;
                    externalSetOpen?.(!open);
                    setOpen(!open);
                }}
                className={twMerge(
                    "cursor-pointer",
                    "twui-dropdown-target",
                    targetWrapperProps?.className
                )}
            >
                {target}
            </div>
            <div
                {...contentWrapperProps}
                className={twMerge(
                    "absolute z-10 mt-1",
                    position == "left"
                        ? "left-[100%] top-[50%] -translate-y-[50%]"
                        : position == "right"
                        ? "right-[100%] top-[50%] -translate-y-[50%]"
                        : position == "bottom-left"
                        ? "left-0 top-[100%]"
                        : position == "bottom-right"
                        ? "right-0 top-[100%]"
                        : position == "center"
                        ? "left-[50%] -translate-x-[50%] top-[100%]"
                        : position == "top"
                        ? "left-[50%] -translate-x-[50%] bottom-[100%]"
                        : "top-[100%]",
                    above ? "-translate-y-[120%]" : "",
                    open ? "flex" : "hidden",
                    "twui-dropdown-content",
                    contentWrapperProps?.className
                )}
                onMouseEnter={() => {
                    if (!hoverOpen) return;
                    window.clearTimeout(timeout);
                }}
                onBlur={() => {
                    if (!hoverOpen) return;
                    window.clearTimeout(timeout);
                }}
                style={{
                    // top: `calc(100% + ${topOffset || 0}px)`,
                    ...contentWrapperProps?.style,
                }}
                ref={dropdownContentRef}
            >
                {props.children}
            </div>
        </div>
    );
 }
--- a/src/components/lib/elements/EmptyContent.tsx
+++ b/src/components/lib/elements/EmptyContent.tsx
@ -0,0 +1,88 @@
 import React, { ComponentProps, PropsWithChildren, ReactNode } from "react";
 import { twMerge } from "tailwind-merge";
 import Stack from "../layout/Stack";
 import Border from "./Border";
 import Center from "../layout/Center";
 import Row from "../layout/Row";
 import Span from "../layout/Span";
 import Link from "../layout/Link";
 export const ToastStyles = ["normal", "success", "error"] as const;
 export const ToastColors = ToastStyles;
 export type TWUIEmptyContentProps = ComponentProps<typeof Stack> & {
    title: string;
    url?: string;
    linkProps?: ComponentProps<typeof Link>;
    borderProps?: ComponentProps<typeof Border>;
    textProps?: ComponentProps<typeof Span>;
    contentWrapperProps?: ComponentProps<typeof Row>;
    icon?: ReactNode;
 };
 /**
 * # EmptyC ontent Component
 * @className twui-empty-content
 * @className twui-empty-content-border
 * @className twui-empty-content-link
 */
 export default function EmptyContent({
    title,
    url,
    linkProps,
    icon,
    borderProps,
    textProps,
    contentWrapperProps,
    ...props
 }: TWUIEmptyContentProps) {
    const mainComponent = (
        <Stack
            {...props}
            className={twMerge("w-full", "twui-empty-content", props.className)}
        >
            <Border
                {...borderProps}
                className={twMerge(
                    "w-full",
                    borderProps?.className,
                    "twui-empty-content-border"
                )}
            >
                <Center>
                    <Row {...contentWrapperProps}>
                        {icon && <div className="opacity-50">{icon}</div>}
                        <Span
                            size="small"
                            {...textProps}
                            className={twMerge(
                                "opacity-70 text-foreground-light dark:text-foreground-dark",
                                textProps?.className
                            )}
                        >
                            {title}
                        </Span>
                    </Row>
                </Center>
            </Border>
        </Stack>
    );
    if (url) {
        return (
            <Link
                {...linkProps}
                className={twMerge(
                    "w-full",
                    "twui-empty-content-link",
                    linkProps?.className
                )}
                href={url}
            >
                {mainComponent}
            </Link>
        );
    }
    return mainComponent;
 }
--- a/src/components/lib/elements/HeaderLink.tsx
+++ b/src/components/lib/elements/HeaderLink.tsx
@ -0,0 +1,33 @@
 import { ComponentProps, DetailedHTMLProps, HTMLAttributes } from "react";
 import Link from "../layout/Link";
 import { TwuiHeaderLink } from "./HeaderNav";
 import { twMerge } from "tailwind-merge";
 import Row from "../layout/Row";
 export type TWUI_HEADER_LINK_PROPS = ComponentProps<typeof Link> & {
    link: TwuiHeaderLink;
 };
 /**
 * # Header Nav Component
 * @className_wrapper twui-header-link
 */
 export default function HeaderLink({ link, ...props }: TWUI_HEADER_LINK_PROPS) {
    return (
        <Link
            href={link.url}
            strict={link.strict}
            {...props}
            className={twMerge(
                "grow p-2 hover:opacity-50",
                "twui-header-link",
                props.className
            )}
        >
            <Row>
                {link.icon}
                {link.title}
            </Row>
        </Link>
    );
 }
--- a/src/components/lib/elements/HeaderNav.tsx
+++ b/src/components/lib/elements/HeaderNav.tsx
@ -0,0 +1,98 @@
 import React, { DetailedHTMLProps, HTMLAttributes, ReactNode } from "react";
 import { twMerge } from "tailwind-merge";
 import Row from "../layout/Row";
 import HeaderNavLinkComponent from "./HeaderNavLinkComponent";
 export type TWUI_HEADER_NAV_PROPS = DetailedHTMLProps<
    HTMLAttributes<HTMLElement>,
    HTMLElement
 > & {
    headerLinks: TwuiHeaderLink[];
    customDropdowns?: {
        url: string;
        content: ReactNode;
    }[];
 };
 export type TwuiHeaderLink = {
    title: string;
    url: string;
    strict?: boolean;
    dropdown?: ReactNode;
    children?: TwuiHeaderLink[];
    icon?: ReactNode;
 };
 /**
 * # Header Nav Component
 * @className twui-header-nav
 * @className twui-header-nav-link-component
 * @className twui-header-nav-link-icon
 * @className twui-header-nav-link-dropdown
 */
 export default function HeaderNav({
    headerLinks,
    customDropdowns,
    ...props
 }: TWUI_HEADER_NAV_PROPS) {
    React.useEffect(() => {
        twuiAddActiveLinksFn({ selector: ".twui-header-nav-link-component a" });
    }, []);
    return (
        <nav
            {...props}
            className={twMerge(
                "twui-header-nav w-full xl:w-auto",
                props.className
            )}
        >
            <Row className="gap-x-2 gap-y-2 flex-col xl:flex-row items-start xl:items-stretch">
                {headerLinks.map((link, index) => {
                    const targetCustomDropdown = customDropdowns?.find(
                        (d) => d.url == link.url
                    );
                    return (
                        <HeaderNavLinkComponent
                            link={link}
                            key={index}
                            dropdown={targetCustomDropdown?.content}
                        />
                    );
                })}
            </Row>
        </nav>
    );
 }
 type AddActiveLinkParams = {
    selector?: string;
    wrapperEl?: HTMLElement;
 };
 export function twuiAddActiveLinksFn({
    selector,
    wrapperEl,
 }: AddActiveLinkParams) {
    (wrapperEl || document).querySelectorAll(selector || "a").forEach((ln) => {
        const linkEl = ln as HTMLAnchorElement;
        const isLinkStrict = linkEl.dataset.strict;
        const linkAttr = linkEl.getAttribute("href");
        if (window.location.pathname === "/" && linkAttr == "/") {
            linkEl.classList.add("active");
        } else if (
            isLinkStrict &&
            linkEl.getAttribute("href") === window.location.pathname
        ) {
            linkEl.classList.add("active");
        } else if (
            linkAttr &&
            window.location.pathname.startsWith(linkAttr) &&
            !isLinkStrict
        ) {
            linkEl.classList.add("active");
        }
    });
 }
--- a/src/components/lib/elements/HeaderNavLinkComponent.tsx
+++ b/src/components/lib/elements/HeaderNavLinkComponent.tsx
@ -0,0 +1,141 @@
 import React, { DetailedHTMLProps, HTMLAttributes, ReactNode } from "react";
 import { twMerge } from "tailwind-merge";
 import Row from "../layout/Row";
 import HeaderLink from "./HeaderLink";
 import { ChevronDown } from "lucide-react";
 import Dropdown from "./Dropdown";
 import { TwuiHeaderLink } from "./HeaderNav";
 import Card from "./Card";
 import Stack from "../layout/Stack";
 import Button from "../layout/Button";
 /**
 * # Header Nav Main Link Component
 * @className twui-header-nav-link-component
 * @className twui-header-nav-link-icon
 * @className twui-header-nav-link-dropdown
 */
 export default function HeaderNavLinkComponent({
    link,
    dropdown,
 }: {
    link: TwuiHeaderLink;
    dropdown?: ReactNode;
 }) {
    const isDropdown = dropdown || link.dropdown || link.children?.[0];
    const mainLinkComponent = (
        <Row className="gap-0 grow">
            <HeaderLink link={link} strict={link.strict} />
            {isDropdown && (
                <ChevronDown
                    className={twMerge(
                        "hidden xl:flex xl:-ml-1",
                        "twui-header-nav-link-icon"
                    )}
                    size={20}
                />
            )}
        </Row>
    );
    const [showMobileDropdown, setShowMobileDropdown] = React.useState(false);
    return (
        <div
            className={twMerge(
                "relative w-full xl:w-auto [&_a.active]:font-bold",
                "twui-header-nav-link-component"
            )}
        >
            {isDropdown ? (
                <React.Fragment>
                    <Stack className="flex xl:hidden w-full">
                        <Row className="w-full justify-between">
                            {mainLinkComponent}
                            <Button
                                variant="ghost"
                                onClick={() =>
                                    setShowMobileDropdown(!showMobileDropdown)
                                }
                                title="Header Links Dropdown Button"
                            >
                                <ChevronDown
                                    className={twMerge(
                                        "twui-header-nav-link-icon !text-link dark:!text-white"
                                    )}
                                    size={20}
                                />
                            </Button>
                        </Row>
                        {showMobileDropdown && (
                            <Stack className="w-full">
                                {dropdown ? (
                                    dropdown
                                ) : link.children?.[0] ? (
                                    <Card
                                        className={twMerge(
                                            "w-full p-0",
                                            "twui-header-nav-link-dropdown"
                                        )}
                                    >
                                        <Stack className="w-full items-stretch gap-0 py-2">
                                            {link.children.map(
                                                (_ch, _index) => {
                                                    return (
                                                        <HeaderLink
                                                            link={_ch}
                                                            key={_index}
                                                            className="px-6 py-4"
                                                        />
                                                    );
                                                }
                                            )}
                                        </Stack>
                                    </Card>
                                ) : link.dropdown ? (
                                    link.dropdown
                                ) : null}
                            </Stack>
                        )}
                    </Stack>
                    <Dropdown
                        target={mainLinkComponent}
                        position="center"
                        hoverOpen
                        className="hidden xl:flex"
                    >
                        {dropdown ? (
                            dropdown
                        ) : link.children?.[0] ? (
                            <Card
                                className={twMerge(
                                    "min-w-[200px] mt-2 p-0",
                                    "twui-header-nav-link-dropdown"
                                )}
                            >
                                <Stack className="w-full items-stretch gap-0 py-2">
                                    {link.children.map((_ch, _index) => {
                                        return (
                                            <HeaderLink
                                                link={_ch}
                                                key={_index}
                                                className="px-6 py-4"
                                            />
                                        );
                                    })}
                                </Stack>
                            </Card>
                        ) : link.dropdown ? (
                            link.dropdown
                        ) : null}
                    </Dropdown>
                </React.Fragment>
            ) : (
                mainLinkComponent
            )}
        </div>
    );
 }
--- a/src/components/lib/elements/HtmlToReactComponent.tsx
+++ b/src/components/lib/elements/HtmlToReactComponent.tsx
@ -0,0 +1,34 @@
 import { DetailedHTMLProps, HTMLAttributes } from "react";
 import HtmlToReact from "html-to-react";
 import { twMerge } from "tailwind-merge";
 export type TWUI_TOGGLE_PROPS = DetailedHTMLProps<
    HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
 > & {
    html: string;
    componentRef?: React.RefObject<any>;
 };
 /**
 * # HTML String to React Component
 * @className_wrapper twui-html-react
 */
 export default function HtmlToReactComponent({
    html,
    componentRef,
    ...props
 }: TWUI_TOGGLE_PROPS) {
    const htmlToReactParser = HtmlToReact.Parser();
    const reactElement = htmlToReactParser.parse(html);
    return (
        <div
            {...props}
            className={twMerge("", props.className)}
            ref={componentRef}
        >
            {reactElement}
        </div>
    );
 }
--- a/src/components/lib/elements/LinkList.tsx
+++ b/src/components/lib/elements/LinkList.tsx
@ -0,0 +1,160 @@
 import React, {
    ComponentProps,
    DetailedHTMLProps,
    HTMLAttributes,
    ReactNode,
 } from "react";
 import { twMerge } from "tailwind-merge";
 import Link from "../layout/Link";
 import { twuiAddActiveLinksFn } from "./HeaderNav";
 import Row from "../layout/Row";
 import Divider from "../layout/Divider";
 import Button from "../layout/Button";
 export type TWUI_LINK_LIST_LINK_OBJECT = {
    title?: string;
    component?: ReactNode;
    url?: string;
    strict?: boolean;
    icon?: ReactNode;
    iconPosition?: "before" | "after";
    linkProps?: ComponentProps<typeof Link>;
    buttonProps?: Omit<ComponentProps<typeof Button>, "title">;
    linkType?: "button" | "link";
    divider?: ReactNode;
    onClick?: React.MouseEventHandler<HTMLElement>;
 };
 export type TWUI_LINK_LIST_PROPS = DetailedHTMLProps<
    HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
 > & {
    links: (
        | TWUI_LINK_LIST_LINK_OBJECT
        | TWUI_LINK_LIST_LINK_OBJECT[]
        | undefined
    )[];
    linkProps?: ComponentProps<typeof Link>;
    buttonProps?: Omit<ComponentProps<typeof Button>, "title">;
    divider?: boolean;
    dividerComponent?: ReactNode;
    linkType?: "button" | "link";
 };
 /**
 * # Link List Component
 * @description A component that renders a list of links.
 * @className_wrapper twui-link-list
 */
 export default function LinkList({
    links,
    linkProps,
    buttonProps,
    divider,
    dividerComponent,
    linkType,
    ...props
 }: TWUI_LINK_LIST_PROPS) {
    const listRef = React.useRef<HTMLDivElement>(null);
    React.useEffect(() => {
        twuiAddActiveLinksFn({
            wrapperEl: listRef.current || undefined,
            selector: "a",
        });
    }, []);
    return (
        <div
            ref={listRef}
            {...props}
            className={twMerge(
                "flex flex-row items-center gap-1",
                "twui-link-list",
                props.className,
            )}
        >
            {links
                .flat()
                .filter((ln) => Boolean(ln))
                .map((link, index) => {
                    if (!link) return null;
                    if (link.divider)
                        return (
                            <React.Fragment key={index}>
                                {link.divider}
                            </React.Fragment>
                        );
                    const finalDivider =
                        index < links.length - 1 &&
                        (dividerComponent ? (
                            dividerComponent
                        ) : divider ? (
                            <Divider />
                        ) : undefined);
                    if (linkType == "button" || link.linkType == "button") {
                        return (
                            <React.Fragment key={index}>
                                <Button
                                    title={link.title || "Link Button"}
                                    variant="ghost"
                                    {...buttonProps}
                                    {...link.buttonProps}
                                    className={twMerge(
                                        "p-2 cursor-pointer whitespace-nowrap",
                                        linkProps?.className,
                                    )}
                                    onClick={(e) => {
                                        link.onClick?.(e);
                                        link.buttonProps?.onClick?.(e);
                                    }}
                                >
                                    <Row>
                                        {link.icon}
                                        {link.component || link.title}
                                    </Row>
                                </Button>
                                {finalDivider}
                            </React.Fragment>
                        );
                    }
                    return (
                        <React.Fragment key={index}>
                            <Link
                                href={link.url}
                                title={link.title}
                                {...linkProps}
                                {...link.linkProps}
                                className={twMerge(
                                    "p-2 cursor-pointer whitespace-nowrap",
                                    linkProps?.className,
                                    link.linkProps?.className,
                                )}
                                strict={link.strict}
                                onClick={(e) => {
                                    link.onClick?.(e);
                                    link.linkProps?.onClick?.(e);
                                }}
                            >
                                <Row>
                                    {!link.iconPosition ||
                                    link.iconPosition == "before"
                                        ? link.icon
                                        : null}
                                    {link.component || link.title}
                                    {link.iconPosition == "after"
                                        ? link.icon
                                        : null}
                                </Row>
                            </Link>
                            {finalDivider}
                        </React.Fragment>
                    );
                })}
        </div>
    );
 }
--- a/src/components/lib/elements/Loading.tsx
+++ b/src/components/lib/elements/Loading.tsx
@ -0,0 +1,62 @@
 import { DetailedHTMLProps, HTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 type Props = DetailedHTMLProps<
    HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
 > & {
    size?: "small" | "normal" | "medium" | "large" | "smaller";
    svgClassName?: string;
 };
 /**
 * # Loading Component
 * @className_wrapper twui-loading
 */
 export default function Loading({ size, svgClassName, ...props }: Props) {
    const sizeClassName = (() => {
        switch (size) {
            case "smaller":
                return "w-4 h-4";
            case "small":
                return "w-5 h-5";
            case "normal":
                return "w-6 h-6";
            case "large":
                return "w-7 h-7";
            default:
                return "w-6 h-6";
        }
    })();
    return (
        <div
            role="status"
            {...props}
            className={twMerge(`twui-loading`, props.className)}
        >
            <svg
                aria-hidden="true"
                className={twMerge(
                    "text-gray animate-spin dark:text-gray-dark fill-primary",
                    "dark:fill-white twui-loading",
                    sizeClassName,
                    svgClassName,
                )}
                viewBox="0 0 100 101"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                <path
                    d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
                    fill="currentColor"
                />
                <path
                    d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
                    fill="currentFill"
                />
            </svg>
        </div>
    );
 }
--- a/src/components/lib/elements/LoadingBlock.tsx
+++ b/src/components/lib/elements/LoadingBlock.tsx
@ -0,0 +1,24 @@
 import React, { DetailedHTMLProps, HTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 /**
 * # General paper
 * @className_wrapper twui-loading-block
 */
 export default function LoadingBlock({
    ...props
 }: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) {
    return (
        <div
            {...props}
            className={twMerge(
                "bg-slate-200 dark:bg-white/10",
                "rounded animate-pulse w-full h-[60px]",
                "twui-loading-block",
                props.className
            )}
        >
            {props.children}
        </div>
    );
 }
--- a/src/components/lib/elements/LoadingOverlay.tsx
+++ b/src/components/lib/elements/LoadingOverlay.tsx
@ -0,0 +1,46 @@
 import { ComponentProps, DetailedHTMLProps, HTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 import Center from "../layout/Center";
 import Loading from "./Loading";
 import Row from "../layout/Row";
 import Span from "../layout/Span";
 type Props = DetailedHTMLProps<
    HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
 > & {
    loadingProps?: ComponentProps<typeof Loading>;
    label?: string;
    fixed?: boolean;
 };
 /**
 * # Loading Overlay Component
 * @className_wrapper twui-loading-overlay
 */
 export default function LoadingOverlay({
    loadingProps,
    label,
    fixed,
    ...props
 }: Props) {
    return (
        <div
            {...props}
            className={twMerge(
                "top-0 left-0 w-full h-full z-[500]",
                "bg-background-light/90 dark:bg-background-dark/90",
                fixed ? "fixed" : "absolute",
                props.className,
                "twui-loading-overlay",
            )}
        >
            <Center>
                <Row>
                    <Loading {...loadingProps} />
                    {label && <Span>{label}</Span>}
                </Row>
            </Center>
        </div>
    );
 }
--- a/src/components/lib/elements/Modal.tsx
+++ b/src/components/lib/elements/Modal.tsx
@ -0,0 +1,190 @@
 import React, { DetailedHTMLProps, HTMLAttributes } from "react";
 import ModalComponent from "../(partials)/ModalComponent";
 import PopoverComponent from "../(partials)/PopoverComponent";
 import { twMerge } from "tailwind-merge";
 export const TWUIPopoverStyles = [
    "top",
    "bottom",
    "left",
    "right",
    "transform",
    "bottom-left",
    "bottom-right",
 ] as const;
 export const TWUIPopoverTriggers = ["hover", "click"] as const;
 export type TWUI_MODAL_PROPS = DetailedHTMLProps<
    HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
 > & {
    target?: React.ReactNode;
    targetRef?: React.RefObject<HTMLDivElement>;
    popoverReferenceRef?: React.RefObject<HTMLElement | null>;
    targetWrapperProps?: React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLDivElement>,
        HTMLDivElement
    >;
    setOpen?: React.Dispatch<React.SetStateAction<boolean>>;
    open?: boolean;
    isPopover?: boolean;
    position?: (typeof TWUIPopoverStyles)[number];
    trigger?: (typeof TWUIPopoverTriggers)[number];
    debounce?: number;
    onClose?: () => any;
    hoverOpen?: boolean;
 };
 /**
 * # Modal Component
 * @ID twui-modal-root
 * @className twui-modal-content
 * @className twui-modal
 * @ID twui-popover-root
 * @className twui-popover-content
 * @className twui-popover-target
 */
 export default function Modal(props: TWUI_MODAL_PROPS) {
    const {
        target,
        targetRef,
        targetWrapperProps,
        open: existingOpen,
        setOpen: existingSetOpen,
        isPopover,
        popoverReferenceRef,
        trigger = "hover",
        debounce = 500,
        onClose,
        hoverOpen,
    } = props;
    const [ready, setReady] = React.useState(false);
    const [open, setOpen] = React.useState(existingOpen || false);
    React.useEffect(() => {
        const IDName = isPopover ? "twui-popover-root" : "twui-modal-root";
        const modalRoot = document.getElementById(IDName);
        if (modalRoot) {
            if (isPopover) {
                modalRoot.style.zIndex = "1000";
            }
            setReady(true);
        } else {
            const newModalRootEl = document.createElement("div");
            newModalRootEl.id = IDName;
            document.body.appendChild(newModalRootEl);
            setReady(true);
        }
    }, []);
    React.useEffect(() => {
        existingSetOpen?.(open);
        if (open == false) onClose?.();
    }, [open]);
    React.useEffect(() => {
        setOpen(existingOpen || false);
    }, [existingOpen]);
    const finalTargetRef = targetRef || React.useRef<HTMLDivElement>(null);
    const finalPopoverReferenceRef = popoverReferenceRef || finalTargetRef;
    const popoverTargetActiveRef = React.useRef(false);
    const popoverContentActiveRef = React.useRef(false);
    let closeTimeout: any;
    const popoverEnterFn = React.useCallback((e: any) => {
        popoverTargetActiveRef.current = true;
        popoverContentActiveRef.current = false;
        setOpen(true);
        props.onMouseEnter?.(e);
    }, []);
    const popoverLeaveFn = React.useCallback((e: any) => {
        window.clearTimeout(closeTimeout);
        closeTimeout = setTimeout(() => {
            // if (popoverTargetActiveRef.current) {
            //     popoverTargetActiveRef.current = false;
            //     return;
            // }
            if (popoverContentActiveRef.current) {
                popoverContentActiveRef.current = false;
                return;
            }
            setOpen(false);
        }, debounce);
        props.onMouseLeave?.(e);
    }, []);
    const handleClickOutside = React.useCallback((e: MouseEvent) => {
        const targetEl = e.target as HTMLElement;
        const closestWrapper = targetEl.closest(".twui-popover-content");
        const closestTarget = targetEl.closest(".twui-popover-target");
        if (closestTarget) return;
        if (!closestWrapper) {
            return setOpen(false);
        }
    }, []);
    React.useEffect(() => {
        if (!isPopover) return;
        document.addEventListener("click", handleClickOutside);
        return () => {
            document.removeEventListener("click", handleClickOutside);
        };
    }, []);
    return (
        <React.Fragment>
            {target ? (
                <div
                    {...targetWrapperProps}
                    onClick={(e) => {
                        e.preventDefault();
                        e.stopPropagation();
                        setOpen(!open);
                    }}
                    ref={finalTargetRef}
                    onMouseEnter={
                        isPopover && (trigger === "hover" || hoverOpen)
                            ? popoverEnterFn
                            : targetWrapperProps?.onMouseEnter
                    }
                    onMouseLeave={
                        isPopover && (trigger === "hover" || hoverOpen)
                            ? popoverLeaveFn
                            : targetWrapperProps?.onMouseLeave
                    }
                    className={twMerge(
                        "twui-popover-target",
                        targetWrapperProps?.className
                    )}
                >
                    {target}
                </div>
            ) : null}
            {ready ? (
                isPopover ? (
                    <PopoverComponent
                        {...props}
                        open={open}
                        setOpen={setOpen}
                        targetElRef={finalPopoverReferenceRef}
                        debounce={debounce}
                        popoverTargetActiveRef={popoverTargetActiveRef}
                        popoverContentActiveRef={popoverContentActiveRef}
                    />
                ) : (
                    <ModalComponent {...props} open={open} setOpen={setOpen} />
                )
            ) : null}
        </React.Fragment>
    );
 }
--- a/src/components/lib/elements/Pagination.tsx
+++ b/src/components/lib/elements/Pagination.tsx
@ -0,0 +1,126 @@
 import React, { ComponentProps, Dispatch, SetStateAction } from "react";
 import _ from "lodash";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 import Row from "../layout/Row";
 import Button from "../layout/Button";
 import EmptyContent from "./EmptyContent";
 import Span from "../layout/Span";
 type Props = ComponentProps<typeof Row> & {
    page?: number;
    setPage?: Dispatch<SetStateAction<number>>;
    count?: number;
    limit?: number;
 };
 /**
 * # Pagination Component
 * @param param0
 * @returns
 */
 export default function Pagination({
    count,
    page,
    setPage,
    limit,
    ...props
 }: Props) {
    if (!count || !page || !limit)
        return (
            <EmptyContent title={`count, page, and limit are all required`} />
        );
    const isLimit = limit * page >= count;
    const pages = Math.ceil(count / limit);
    return (
        <Row
            {...props}
            className={twMerge(
                "w-full justify-between flex-nowrap",
                props.className
            )}
        >
            {pages > 1 && (
                <Button
                    title="Next Page Button"
                    onClick={() => {
                        window.scrollTo({ top: 0, behavior: "smooth" });
                        setPage?.((prev) => prev - 1);
                    }}
                    variant="outlined"
                    size="small"
                    className={twMerge(
                        "p-1",
                        page == 1 ? "opacity-40 pointer-events-none" : ""
                    )}
                >
                    <ChevronLeft size={20} />
                </Button>
            )}
            <Row className={twMerge("gap-6 w-full flex-nowrap justify-center")}>
                <Span size="small" variant="faded">
                    Page {page} / {pages}
                </Span>
                {pages > 1 && (
                    <Row
                        className={twMerge(
                            "flex-nowrap overflow-x-auto p-1 max-w-[90%]"
                        )}
                    >
                        {Array(pages)
                            .fill(0)
                            .map((p, index) => {
                                const isCurrent = page == index + 1;
                                return (
                                    <Button
                                        title={`Page ${index + 1}`}
                                        onClick={() => {
                                            window.scrollTo({
                                                top: 0,
                                                behavior: "smooth",
                                            });
                                            setPage?.(index + 1);
                                        }}
                                        variant={
                                            isCurrent ? "normal" : "outlined"
                                        }
                                        size="small"
                                        color={isCurrent ? "primary" : "gray"}
                                        className={twMerge(
                                            "p-1 w-6 h-6 min-w-6"
                                        )}
                                        key={index}
                                    >
                                        {index + 1}
                                    </Button>
                                );
                            })}
                    </Row>
                )}
            </Row>
            {pages > 1 && (
                <Button
                    title="Next Page Button"
                    onClick={() => {
                        window.scrollTo({ top: 0, behavior: "smooth" });
                        setPage?.((prev) => prev + 1);
                    }}
                    variant="outlined"
                    size="small"
                    className={twMerge(
                        "p-1",
                        isLimit ? "opacity-40 pointer-events-none" : ""
                    )}
                >
                    <ChevronRight size={20} />
                </Button>
            )}
        </Row>
    );
 }
--- a/src/components/lib/elements/Paper.tsx
+++ b/src/components/lib/elements/Paper.tsx
@ -0,0 +1,36 @@
 import React, { DetailedHTMLProps, HTMLAttributes, RefObject } from "react";
 import { twMerge } from "tailwind-merge";
 /**
 * # General paper
 * @className_wrapper twui-paper
 */
 export default function Paper({
    variant,
    linkProps,
    componentRef,
    ...props
 }: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
    variant?: "normal";
    linkProps?: DetailedHTMLProps<
        React.AnchorHTMLAttributes<HTMLAnchorElement>,
        HTMLAnchorElement
    >;
    componentRef?: RefObject<HTMLDivElement | null>;
 }) {
    return (
        <div
            {...props}
            ref={componentRef as any}
            className={twMerge(
                "flex flex-col items-start p-4 rounded bg-background-light dark:bg-background-dark gap-4",
                "border border-slate-200 dark:border-white/10 border-solid w-full",
                "relative",
                "twui-paper",
                props.className
            )}
        >
            {props.children}
        </div>
    );
 }
--- a/Show More
+++ b/Show More
		`@ -0,0 +1 @@`
							`@moduletrace:registry=https://git.tben.me/api/packages/moduletrace/npm/`
		`@ -0,0 +1,3 @@`
							`[install.scopes]`

							`"@moduletrace" = "https://git.tben.me/api/packages/moduletrace/npm/"`
		`@ -0,0 +1 @@`
							<?xml version="1.0" encoding="UTF-8" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 611 611" width="611pt" height="611pt"><defs><clipPath id="_clipPath_2zfa3boh6FNyOkB9zT4Cm84iY9vA0NWV"><rect width="611" height="611"/></clipPath></defs><g clip-path="url(#_clipPath_2zfa3boh6FNyOkB9zT4Cm84iY9vA0NWV)"><rect x="0" y="0" width="610.63" height="610.63" transform="matrix(1,0,0,1,0,0)" fill="none"/><clipPath id="_clipPath_7KSpsgRxupOAmqFAFnlf5LCTNooKCwdC"><rect x="0" y="0" width="610.63" height="610.63" transform="matrix(1,0,0,1,0,0)" fill="rgb(255,255,255)"/></clipPath><g clip-path="url(#_clipPath_7KSpsgRxupOAmqFAFnlf5LCTNooKCwdC)"><g><g><g><path d=" M 610.63 515.37 L 610.63 619.37 L 590.72 607.63 L 461.72 531.55 L 306.83 617 L 151.94 702.39 L 138.33 709.89 L 0 786.14 L 0 0 L 362 0 C 434.173 0 490.98 15.707 532.42 47.12 C 534.38 48.613 536.297 50.137 538.17 51.69 C 575.177 82.423 593.98 125.773 594.58 181.74 L 594.58 184.49 C 594.58 225.95 583.717 260.877 561.99 289.27 C 540.263 317.663 511.353 336.547 475.26 345.92 C 518.027 355.92 551.283 376.477 575.03 407.59 C 598.777 438.703 610.643 474.63 610.63 515.37 Z M 368.49 519.89 C 378.163 512.21 383 499.673 383 482.28 C 383 448.193 363.28 431.15 323.84 431.15 L 222.6 431.15 L 222.6 531.42 L 323.87 531.42 C 343.923 531.42 358.797 527.577 368.49 519.89 Z M 368 227.61 C 368 210.23 363.153 197.36 353.46 189 C 343.767 180.64 328.893 176.463 308.84 176.47 L 222.6 176.47 L 222.6 276.74 L 308.83 276.74 C 328.877 276.74 343.75 272.74 353.45 264.74 C 363.15 256.74 368 244.363 368 227.61 Z " fill="rgb(255,255,255)"/></g></g></g></g></g></svg>
		`@ -0,0 +1 @@`
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 610.63 1042.32"><defs><style>.cls-1{fill:#565e9a;}.cls-2{fill:#6369b0;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="610.63 784.67 610.63 952.95 461.71 1042.32 461.71 874.03 464.52 872.35 610.63 784.67"/><polygon class="cls-1" points="610.63 619.33 610.63 784.67 461.71 702.53 468.56 698.7 563.9 645.44 610.63 619.33"/><path class="cls-2" d="M610.63,515.37v104l-19.91-11.74-129-76.08L306.83,617,151.94,702.39l-13.61,7.5L0,786.14V0H362Q470.26,0,532.42,47.12q2.94,2.24,5.75,4.57,55.51,46.1,56.41,130.05c0,.92,0,1.83,0,2.75q0,62.19-32.59,104.78t-86.73,56.65q64.15,15,99.77,61.67T610.63,515.37Zm-242.14,4.52Q383,508.37,383,482.28q0-51.13-59.16-51.13H222.6V531.42H323.87Q353.95,531.42,368.49,519.89ZM368,227.61q0-26.07-14.54-38.61t-44.62-12.53H222.6V276.74h86.23q30.07,0,44.62-12T368,227.61Z"/><polygon class="cls-2" points="461.71 874.03 461.71 1042.32 306.83 957.3 306.83 789.02 461.71 874.03"/><polygon class="cls-1" points="306.83 789.02 306.83 957.3 151.94 1042.32 151.94 875.51 156.15 873.19 306.83 789.02"/><polygon class="cls-2" points="151.94 875.51 151.94 1042.32 0 958.98 0 786.14 151.94 875.51"/></g></g></svg>