npm - boltdocs - Versions diffs - 2.1.1 → 2.3.0 - Mend

boltdocs 2.1.1 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (133) hide show

package/CHANGELOG.md +19 -0
package/bin/boltdocs.js +2 -2
package/dist/base-ui/index.d.mts +25 -0
package/dist/base-ui/index.d.ts +25 -0
package/dist/base-ui/index.js +1 -0
package/dist/base-ui/index.mjs +1 -0
package/dist/{cache-Q4T6VAUL.mjs → cache-P6WK424C.mjs} +1 -1
package/dist/chunk-22NXDNP4.mjs +74 -0
package/dist/chunk-2HUVMMJU.mjs +1 -0
package/dist/chunk-2Z5T6EAU.mjs +1 -0
package/dist/chunk-CRZGOE32.mjs +1 -0
package/dist/chunk-HA6543SL.mjs +1 -0
package/dist/chunk-JD3RSDE4.mjs +1 -0
package/dist/chunk-JZXLCA2E.mjs +1 -0
package/dist/chunk-NBCYHLAA.mjs +1 -0
package/dist/chunk-RPUERTVC.mjs +1 -0
package/dist/chunk-T3W44KWY.mjs +1 -0
package/dist/chunk-URTD6E6S.mjs +1 -0
package/dist/chunk-W2NB4T6V.mjs +1 -0
package/dist/chunk-Y4RRHPXC.mjs +1 -0
package/dist/client/index.d.mts +13 -115
package/dist/client/index.d.ts +13 -115
package/dist/client/index.js +1 -1
package/dist/client/index.mjs +1 -1
package/dist/client/ssr.js +1 -1
package/dist/client/ssr.mjs +1 -1
package/dist/client/types.d.mts +3 -0
package/dist/client/types.d.ts +3 -0
package/dist/client/types.js +1 -0
package/dist/client/types.mjs +0 -0
package/dist/copy-markdown-C-90ixSe.d.ts +15 -0
package/dist/copy-markdown-CbS8X-qe.d.mts +15 -0
package/dist/{client/hooks → hooks}/index.d.mts +16 -11
package/dist/{client/hooks → hooks}/index.d.ts +16 -11
package/dist/hooks/index.js +1 -0
package/dist/hooks/index.mjs +1 -0
package/dist/integrations/index.d.mts +48 -0
package/dist/integrations/index.d.ts +48 -0
package/dist/integrations/index.js +1 -0
package/dist/integrations/index.mjs +1 -0
package/dist/link-DfBwCeZc.d.mts +68 -0
package/dist/link-DfBwCeZc.d.ts +68 -0
package/dist/loading-B7X5Wchs.d.ts +66 -0
package/dist/loading-WuaQbsKb.d.mts +66 -0
package/dist/{client/components/mdx → mdx}/index.d.mts +6 -38
package/dist/{client/components/mdx → mdx}/index.d.ts +6 -38
package/dist/mdx/index.js +1 -0
package/dist/mdx/index.mjs +1 -0
package/dist/node/cli-entry.js +31 -27
package/dist/node/cli-entry.mjs +5 -1
package/dist/node/index.d.mts +44 -14
package/dist/node/index.d.ts +44 -14
package/dist/node/index.js +24 -24
package/dist/node/index.mjs +1 -1
package/dist/primitives/index.d.mts +301 -0
package/dist/primitives/index.d.ts +301 -0
package/dist/primitives/index.js +1 -0
package/dist/primitives/index.mjs +1 -0
package/dist/search-dialog-ZRXBAQJ5.mjs +1 -0
package/dist/{types-Cp21DHI6.d.mts → types-j7jvWsJj.d.mts} +63 -17
package/dist/{types-Cp21DHI6.d.ts → types-j7jvWsJj.d.ts} +63 -17
package/dist/{use-routes-xLhumjbV.d.ts → use-routes-Cd806kGw.d.ts} +1 -1
package/dist/{use-routes-8Iei6jTp.d.mts → use-routes-DDL0_jkQ.d.mts} +1 -1
package/package.json +35 -8
package/src/client/app/index.tsx +155 -35
package/src/client/app/mdx-component.tsx +7 -3
package/src/client/app/theme-context.tsx +47 -23
package/src/client/components/default-layout.tsx +16 -6
package/src/client/components/primitives/breadcrumbs.tsx +1 -1
package/src/client/components/primitives/navbar.tsx +8 -5
package/src/client/components/primitives/search-dialog.tsx +15 -6
package/src/client/components/primitives/sidebar.tsx +3 -2
package/src/client/components/primitives/skeleton.tsx +26 -0
package/src/client/components/ui-base/breadcrumbs.tsx +1 -1
package/src/client/components/ui-base/index.ts +17 -0
package/src/client/components/ui-base/loading.tsx +43 -73
package/src/client/components/ui-base/navbar.tsx +74 -39
package/src/client/components/ui-base/page-nav.tsx +2 -1
package/src/client/components/ui-base/powered-by.tsx +11 -5
package/src/client/components/ui-base/search-dialog.tsx +16 -5
package/src/client/components/ui-base/sidebar.tsx +33 -22
package/src/client/components/ui-base/tabs.tsx +4 -1
package/src/client/components/ui-base/theme-toggle.tsx +35 -15
package/src/client/hooks/use-i18n.ts +38 -7
package/src/client/hooks/use-localized-to.ts +51 -73
package/src/client/hooks/use-navbar.ts +10 -3
package/src/client/hooks/use-page-nav.ts +27 -6
package/src/client/hooks/use-routes.ts +62 -17
package/src/client/hooks/use-search.ts +84 -46
package/src/client/hooks/use-sidebar.ts +6 -2
package/src/client/hooks/use-version.ts +5 -0
package/src/client/integrations/index.ts +1 -0
package/src/client/store/use-boltdocs-store.ts +44 -0
package/src/client/theme/neutral.css +29 -0
package/src/client/types.ts +4 -2
package/src/client/utils/i18n.ts +23 -0
package/src/node/{cli.ts → cli/build.ts} +17 -23
package/src/node/cli/dev.ts +22 -0
package/src/node/cli/doctor.ts +243 -0
package/src/node/cli/index.ts +9 -0
package/src/node/cli/ui.ts +54 -0
package/src/node/cli-entry.ts +16 -16
package/src/node/config.ts +54 -17
package/src/node/index.ts +1 -1
package/src/node/mdx/cache.ts +12 -0
package/src/node/mdx/highlighter.ts +47 -0
package/src/node/mdx/index.ts +114 -0
package/src/node/mdx/rehype-shiki.ts +53 -0
package/src/node/mdx/remark-shiki.ts +61 -0
package/src/node/plugin/entry.ts +1 -1
package/src/node/plugin/html.ts +8 -4
package/src/node/plugin/index.ts +135 -72
package/src/node/routes/index.ts +34 -13
package/src/node/routes/parser.ts +13 -5
package/src/node/search/index.ts +55 -0
package/src/node/ssg/index.ts +15 -7
package/src/node/ssg/robots.ts +7 -4
package/src/node/utils.ts +32 -2
package/tsup.config.ts +7 -2
package/dist/chunk-52MVMZWS.mjs +0 -1
package/dist/chunk-BVWWKXJH.mjs +0 -1
package/dist/chunk-DVY3RDXD.mjs +0 -1
package/dist/chunk-FUVYCYWC.mjs +0 -1
package/dist/chunk-GBLMDJ2B.mjs +0 -1
package/dist/chunk-ISPX45DF.mjs +0 -1
package/dist/chunk-PNXZMUCO.mjs +0 -1
package/dist/chunk-V2ZHKQSP.mjs +0 -74
package/dist/client/components/mdx/index.js +0 -1
package/dist/client/components/mdx/index.mjs +0 -1
package/dist/client/hooks/index.js +0 -1
package/dist/client/hooks/index.mjs +0 -1
package/dist/search-dialog-TWGYKF2D.mjs +0 -1
package/src/node/mdx.ts +0 -279

package/src/client/components/default-layout.tsx CHANGED Viewed

@@ -13,6 +13,7 @@ import { useConfig } from '@client/app/config-context'
 import { useMdxComponents } from '@client/app/mdx-components-context'
 import { useLocation } from 'react-router-dom'
+import { getTranslated } from '@client/utils/i18n'
 export interface LayoutProps {
   children: React.ReactNode
@@ -24,7 +25,12 @@ export interface LayoutProps {
  * and rearrange, wrap, or replace any section.
  */
 export function DefaultLayout({ children }: LayoutProps) {
-  const { routes: filteredRoutes, allRoutes, currentRoute } = useRoutes()
+  const {
+    routes: filteredRoutes,
+    allRoutes,
+    currentRoute,
+    currentLocale,
+  } = useRoutes()
   const { pathname } = useLocation()
   const config = useConfig()
   const mdxComponents = useMdxComponents()
@@ -36,8 +42,12 @@ export function DefaultLayout({ children }: LayoutProps) {
     <DocsLayout>
       <ProgressBar />
       <Head
-        siteTitle={config.themeConfig?.title || 'Boltdocs'}
-        siteDescription={config.themeConfig?.description || ''}
+        siteTitle={
+          getTranslated(config.theme?.title, currentLocale) || 'Boltdocs'
+        }
+        siteDescription={
+          getTranslated(config.theme?.description, currentLocale) || ''
+        }
         routes={allRoutes}
       />
       <Navbar />
@@ -52,7 +62,7 @@ export function DefaultLayout({ children }: LayoutProps) {
               <CopyMarkdownComp
                 mdxRaw={currentRoute?._rawContent}
                 route={currentRoute}
-                config={config.themeConfig?.copyMarkdown}
+                config={config.theme?.copyMarkdown}
               />
             </DocsLayout.ContentHeader>
           )}
@@ -69,8 +79,8 @@ export function DefaultLayout({ children }: LayoutProps) {
         {!isHome && (
           <OnThisPage
             headings={currentRoute?.headings}
-            editLink={config.themeConfig?.editLink}
-            communityHelp={config.themeConfig?.communityHelp}
+            editLink={config.theme?.editLink}
+            communityHelp={config.theme?.communityHelp}
             filePath={currentRoute?.filePath}
           />
         )}

package/src/client/components/primitives/breadcrumbs.tsx CHANGED Viewed

@@ -16,7 +16,7 @@ export const BreadcrumbsRoot = ({
   return (
     <BreadcrumbsRAC
       className={cn(
-        'flex items-center gap-1.5 mb-0 text-sm text-text-muted',
+        'flex items-center gap-1.5 pl-0! mb-0 text-sm text-text-muted',
         className,
       )}
       {...props}

package/src/client/components/primitives/navbar.tsx CHANGED Viewed

@@ -180,8 +180,11 @@ export const NavbarLink = ({
       href={href}
       target={to === 'external' ? '_blank' : undefined}
       className={cn(
-        'transition-colors outline-none hover:text-text-main focus-visible:ring-2 focus-visible:ring-primary-500/30 rounded-sm',
-        active ? 'text-primary-500' : 'text-text-muted',
+        'transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary-500/30 rounded-sm',
+        {
+          'text-primary-500 font-bold': active,
+          'text-text-muted hover:text-text-main font-medium': !active,
+        },
         className,
       )}
     >
@@ -211,7 +214,7 @@ export const NavbarSearchTrigger = ({
       onPress={onPress}
       className={cn(
         'flex items-center gap-2 rounded-full border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-muted outline-none cursor-pointer',
-        'transition-colors hover:border-border-strong hover:text-text-main',
+        'transition-all duration-200 hover:border-border-strong hover:text-text-main hover:bg-bg-muted hover:shadow-sm active:scale-[0.98]',
         'focus-visible:ring-2 focus-visible:ring-primary-500/30',
         'w-full max-w-[320px] justify-between',
         className,
@@ -243,8 +246,8 @@ export const NavbarTheme = ({
       isSelected={theme === 'dark'}
       onChange={onThemeChange}
       className={cn(
-        'rounded-md p-2 text-text-muted outline-none cursor-pointer transition-colors',
-        'hover:bg-bg-surface hover:text-text-main',
+        'rounded-md p-2 text-text-muted outline-none cursor-pointer',
+        'transition-all duration-300 hover:bg-bg-surface hover:text-text-main hover:rotate-12 active:scale-90',
         'focus-visible:ring-2 focus-visible:ring-primary-500/30',
         className,
       )}

package/src/client/components/primitives/search-dialog.tsx CHANGED Viewed

@@ -50,16 +50,25 @@ export const SearchDialogRoot = ({
   )
 }
-export const SearchDialogAutocomplete = ({
+export const SearchDialogAutocomplete = <T extends object>({
   children,
   className,
+  onSelectionChange,
   ...props
-}: RAC.AutocompleteProps<object> & { className?: string }) => {
+}: RAC.AutocompleteProps<T> & {
+  className?: string
+  onSelectionChange?: (key: RAC.Key) => void
+}) => {
+  const Autocomplete = RAC.Autocomplete as any
   return (
     <div className={className}>
-      <RAC.Autocomplete {...props} className="flex flex-col min-h-0">
+      <Autocomplete
+        {...props}
+        onSelectionChange={onSelectionChange}
+        className="flex flex-col min-h-0"
+      >
         {children}
-      </RAC.Autocomplete>
+      </Autocomplete>
     </div>
   )
 }
@@ -89,11 +98,11 @@ export const SearchDialogInput = ({
   )
 }
-export const SearchDialogList = ({
+export const SearchDialogList = <T extends object>({
   children,
   className,
   ...props
-}: RAC.ListBoxProps<object> & { className?: string }) => {
+}: RAC.ListBoxProps<T> & { className?: string }) => {
   return (
     <RAC.ListBox
       {...props}

package/src/client/components/primitives/sidebar.tsx CHANGED Viewed

@@ -122,11 +122,12 @@ export const SidebarLink = ({
     <Link
       href={href}
       className={cn(
-        'group flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm outline-none transition-colors',
+        'group flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm outline-none',
+        'transition-all duration-200 ease-in-out',
         'focus-visible:ring-2 focus-visible:ring-primary-500/30',
         active
           ? 'bg-primary-500/10 text-primary-500 font-medium'
-          : 'text-text-muted hover:bg-bg-surface hover:text-text-main',
+          : 'text-text-muted hover:bg-bg-surface hover:text-text-main hover:translate-x-1',
         className,
       )}
     >

package/src/client/components/primitives/skeleton.tsx ADDED Viewed

@@ -0,0 +1,26 @@
+import { cn } from '@client/utils/cn'
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: 'rect' | 'circle'
+}
+/**
+ * A flexible skeleton component that mimics the shape of content
+ * while it is loading. Features a smooth pulse animation.
+ */
+export function Skeleton({
+  className,
+  variant = 'rect',
+  ...props
+}: SkeletonProps) {
+  return (
+    <div
+      className={cn(
+        'animate-pulse bg-bg-muted',
+        variant === 'circle' ? 'rounded-full' : 'rounded-md',
+        className,
+      )}
+      {...props}
+    />
+  )
+}

package/src/client/components/ui-base/breadcrumbs.tsx CHANGED Viewed

@@ -12,7 +12,7 @@ import { useConfig } from '@client/app/config-context'
 export function Breadcrumbs() {
   const { crumbs, activeRoute } = useBreadcrumbs()
   const config = useConfig()
-  const themeConfig = config.theme || config.themeConfig || {}
+  const themeConfig = config.theme || {}
   if (crumbs.length === 0) return null

package/src/client/components/ui-base/index.ts ADDED Viewed

@@ -0,0 +1,17 @@
+export { Breadcrumbs } from './breadcrumbs'
+export { CopyMarkdown } from './copy-markdown'
+export type { CopyMarkdownProps } from './copy-markdown'
+export { ErrorBoundary } from './error-boundary'
+export { GithubStars } from './github-stars'
+export { Head } from './head'
+export { Loading } from './loading'
+export { Navbar } from './navbar'
+export { NotFound } from './not-found'
+export { OnThisPage } from './on-this-page'
+export { PageNav } from './page-nav'
+export { PoweredBy } from './powered-by'
+export { ProgressBar } from './progress-bar'
+export { SearchDialog } from './search-dialog'
+export { Sidebar } from './sidebar'
+export { Tabs } from './tabs'
+export { ThemeToggle } from './theme-toggle'

package/src/client/components/ui-base/loading.tsx CHANGED Viewed

@@ -1,85 +1,55 @@
-import { useEffect, useState } from 'react'
+import { cn } from '@client/utils/cn'
+import { Skeleton } from '@primitives/skeleton'
 /**
- * A premium loading component that includes an SVG fill animation
- * and a synchronized progress indicator.
- *
- * It features a glassmorphism container and a Bolt-style SVG logo
- * with a dynamic fill effect.
+ * A premium loading component that only skeletons the markdown content area.
+ * Designed to be used as a Suspense fallback within a persistent layout.
  */
 export function Loading() {
-  const [progress, setProgress] = useState(0)
-  useEffect(() => {
-    let currentProgress = 0
-    let up = true
+  return (
+    <div
+      className={cn(
+        'w-full h-full relative overflow-y-auto transition-opacity duration-300 animate-fade-in',
+      )}
+    >
+      <div className="mx-auto max-w-(--spacing-content-max) px-4 py-8 space-y-10">
+        {/* Breadcrumbs */}
+        <div className="flex gap-2">
+          <Skeleton className="h-3 w-16" />
+          <Skeleton className="h-3 w-24" />
+        </div>
-    const interval = setInterval(() => {
-      if (up) {
-        currentProgress += 1
-        if (currentProgress >= 100) {
-          currentProgress = 100
-          up = false
-        }
-      } else {
-        currentProgress -= 1
-        if (currentProgress <= 0) {
-          currentProgress = 0
-          up = true
-        }
-      }
-      setProgress(currentProgress)
-    }, 20)
+        {/* Page Title */}
+        <Skeleton className="h-10 w-[60%] sm:h-12" />
-    return () => clearInterval(interval)
-  }, [])
+        {/* Intro Paragraph */}
+        <div className="space-y-3">
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-[95%]" />
+          <Skeleton className="h-4 w-[40%]" />
+        </div>
-  const clipPathValue = `inset(${100 - progress}% 0 0 0)`
+        {/* Section 1 */}
+        <div className="space-y-6 pt-4">
+          <Skeleton className="h-7 w-32" />
+          <div className="space-y-3">
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-[98%]" />
+            <Skeleton className="h-4 w-[92%]" />
+            <Skeleton className="h-4 w-[60%]" />
+          </div>
+        </div>
-  return (
-    <div className="flex flex-col items-center justify-center min-h-[60vh] p-4 text-center">
-      <div className="relative group">
-        <div className="relative inline-block">
-          {/* SVG Background (Dimmed Base) */}
-          <svg
-            className="w-24 h-auto opacity-10 filter grayscale brightness-50"
-            viewBox="0 0 60 51"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            role="img"
-            aria-hidden="true"
-          >
-            <title>Loading indicator background</title>
-            <path
-              d="M29.4449 0H19.4449V16.5L29.4449 6.5V0Z"
-              fill="currentColor"
-            />
-            <path
-              d="M26.9449 22.7265C26.9449 22.5077 21.2201 27.0658 16.9449 28.5C13.7491 29.5721 12.3156 29.5038 8.94486 29.5C5.59532 29.4963 0 28.5 0 28.5C0 28.5 5.57953 28.5146 8.94486 27.5C12.5409 26.4158 14.8203 25.5843 17.9449 23.5C23.3445 19.898 29.4449 11.5 29.4449 11.5L29.9449 18C29.9449 18 33.5825 15.8308 36.4449 15C39.4452 14.1291 44.4449 14 44.4449 14C44.4449 14 36.9449 19 34.4449 21.5C31.5322 24.4126 29.8582 26.9017 29.4449 31C29.1217 34.2041 29.4771 36.4508 31.4449 39C33.5792 41.765 35.952 43.0183 39.4449 43C42.677 42.9831 45.3003 42.4182 47.4449 40C49.7406 37.4113 50.2495 34.4466 49.9449 31C49.6603 27.7804 48.4876 25.4953 45.9449 23.5C43.2931 21.4191 36.4449 24 36.4449 24L47.9449 15C47.9449 15 51.5761 16.771 53.4449 18.5C55.711 20.5967 56.7467 22.1546 57.9449 25C59.1784 27.9295 59.4832 29.8216 59.4449 33C59.4089 35.9867 59.179 37.78 57.9449 40.5C56.8475 42.9185 55.8511 44.6507 53.9449 46.5C51.9236 48.4609 50.5803 49.0076 47.9449 50C45.5414 50.9051 44.0131 51 41.4449 51C38.8766 51 37.3235 50.9685 34.9449 50C32.4851 48.9985 29.4449 46 29.4449 46V51H19.4449V37.9904L22.9449 31.4226L26.9449 22.7265Z"
-              fill="currentColor"
-            />
-          </svg>
+        {/* Code Block Placeholder */}
+        <Skeleton className="h-32 w-full rounded-lg bg-bg-muted/50" />
-          {/* SVG Animated (Vibrant Fill Overlay) */}
-          <svg
-            className="absolute top-0 left-0 w-24 h-auto text-primary-500 drop-shadow-[0_0_20px_rgba(var(--primary-rgb),0.5)] transition-[clip-path] duration-100 ease-linear"
-            style={{ clipPath: clipPathValue }}
-            viewBox="0 0 60 51"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            role="img"
-            aria-hidden="true"
-          >
-            <title>Loading indicator animated fill</title>
-            <path
-              d="M29.4449 0H19.4449V16.5L29.4449 6.5V0Z"
-              fill="currentColor"
-            />
-            <path
-              d="M26.9449 22.7265C26.9449 22.5077 21.2201 27.0658 16.9449 28.5C13.7491 29.5721 12.3156 29.5038 8.94486 29.5C5.59532 29.4963 0 28.5 0 28.5C0 28.5 5.57953 28.5146 8.94486 27.5C12.5409 26.4158 14.8203 25.5843 17.9449 23.5C23.3445 19.898 29.4449 11.5 29.4449 11.5L29.9449 18C29.9449 18 33.5825 15.8308 36.4449 15C39.4452 14.1291 44.4449 14 44.4449 14C44.4449 14 36.9449 19 34.4449 21.5C31.5322 24.4126 29.8582 26.9017 29.4449 31C29.1217 34.2041 29.4771 36.4508 31.4449 39C33.5792 41.765 35.952 43.0183 39.4449 43C42.677 42.9831 45.3003 42.4182 47.4449 40C49.7406 37.4113 50.2495 34.4466 49.9449 31C49.6603 27.7804 48.4876 25.4953 45.9449 23.5C43.2931 21.4191 36.4449 24 36.4449 24L47.9449 15C47.9449 15 51.5761 16.771 53.4449 18.5C55.711 20.5967 56.7467 22.1546 57.9449 25C59.1784 27.9295 59.4832 29.8216 59.4449 33C59.4089 35.9867 59.179 37.78 57.9449 40.5C56.8475 42.9185 55.8511 44.6507 53.9449 46.5C51.9236 48.4609 50.5803 49.0076 47.9449 50C45.5414 50.9051 44.0131 51 41.4449 51C38.8766 51 37.3235 50.9685 34.9449 50C32.4851 48.9985 29.4449 46 29.4449 46V51H19.4449V37.9904L22.9449 31.4226L26.9449 22.7265Z"
-              fill="currentColor"
-            />
-          </svg>
+        {/* Section 2 */}
+        <div className="space-y-6 pt-4">
+          <Skeleton className="h-7 w-48" />
+          <div className="space-y-3">
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-[85%]" />
+          </div>
         </div>
       </div>
     </div>

package/src/client/components/ui-base/navbar.tsx CHANGED Viewed

@@ -11,8 +11,9 @@ import { useLocation } from 'react-router-dom'
 import type { BoltdocsSocialLink } from '@node/config'
 import Menu from '@components/primitives/menu'
 import { Button } from '@components/primitives/button'
-import { ChevronDown } from 'lucide-react'
-import { useConfig } from '@client/app/config-context'
+import { ChevronDown, Languages } from 'lucide-react'
+import { useLocalizedTo } from '@hooks/use-localized-to'
+import type { NavbarLink as NavbarLinkType } from '@client/types'
 const SearchDialog = lazy(() =>
   import('./search-dialog').then((m) => ({
@@ -24,7 +25,7 @@ export function Navbar() {
   const { links, title, logo, logoProps, github, social, config } = useNavbar()
   const { routes, allRoutes, currentVersion, currentLocale } = useRoutes()
   const { pathname } = useLocation()
-  const themeConfig = config.theme || config.themeConfig || {}
+  const themeConfig = config.theme || {}
   const hasTabs = themeConfig?.tabs && themeConfig.tabs.length > 0
@@ -32,19 +33,21 @@ export function Navbar() {
     <NavbarPrimitive.NavbarRoot className={hasTabs ? 'border-b-0' : ''}>
       <NavbarPrimitive.Content>
         <NavbarPrimitive.NavbarLeft>
-          <NavbarPrimitive.NavbarLogo
-            src={logo ?? ''}
-            alt={logoProps?.alt || title}
-            width={logoProps?.width ?? 24}
-            height={logoProps?.height ?? 24}
-          />
+          {logo && (
+            <NavbarPrimitive.NavbarLogo
+              src={logo}
+              alt={logoProps?.alt || title}
+              width={logoProps?.width ?? 24}
+              height={logoProps?.height ?? 24}
+            />
+          )}
           <NavbarPrimitive.Title>{title}</NavbarPrimitive.Title>
           {config.versions && currentVersion && <NavbarVersion />}
           <NavbarPrimitive.Links>
             {links.map((link) => (
-              <NavbarPrimitive.Link key={link.href} {...(link as any)} />
+              <NavbarLinkItem key={link.href} link={link} />
             ))}
           </NavbarPrimitive.Links>
         </NavbarPrimitive.NavbarLeft>
@@ -78,16 +81,18 @@ export function Navbar() {
       {pathname !== '/' && hasTabs && themeConfig?.tabs && (
         <div className="w-full border-b border-border-subtle bg-bg-main">
-          <Tabs
-            tabs={themeConfig.tabs}
-            routes={allRoutes || routes || []}
-          />
+          <Tabs tabs={themeConfig.tabs} routes={allRoutes || routes || []} />
         </div>
       )}
     </NavbarPrimitive.NavbarRoot>
   )
 }
+function NavbarLinkItem({ link }: { link: NavbarLinkType }) {
+  const localizedHref = useLocalizedTo(link.href)
+  return <NavbarPrimitive.Link {...(link as any)} href={localizedHref} />
+}
 function NavbarVersion() {
   const { currentVersionLabel, availableVersions, handleVersionChange } =
     useVersion()
@@ -96,43 +101,73 @@ function NavbarVersion() {
   return (
     <Menu.Trigger>
-      <Button variant={'outline'} iconPosition="right" icon={<ChevronDown />}>
-        {currentVersionLabel}
+      <Button
+        variant={'outline'}
+        size="sm"
+        rounded="lg"
+        iconPosition="right"
+        icon={<ChevronDown className="w-3.5 h-3.5 text-text-muted/60" />}
+        className="h-8 border-border-subtle/60 bg-bg-surface/30 backdrop-blur-sm transition-all duration-200 hover:border-primary-500/50 hover:bg-primary-500/5"
+      >
+        <span className="font-semibold text-[0.8125rem]">
+          {currentVersionLabel}
+        </span>
       </Button>
-      <Menu.Section items={availableVersions}>
-        {(version) => (
-          <Menu.Item
-            key={`${version.value ?? ''}`}
-            onPress={() => handleVersionChange(version.value)}
-          >
-            {version.label as string}
-          </Menu.Item>
-        )}
-      </Menu.Section>
+      <Menu.Root>
+        <Menu.Section items={availableVersions}>
+          {(version) => (
+            <Menu.Item
+              key={`${version.value ?? ''}`}
+              onPress={() => handleVersionChange(version.value)}
+            >
+              {version.label as string}
+            </Menu.Item>
+          )}
+        </Menu.Section>
+      </Menu.Root>
     </Menu.Trigger>
   )
 }
 function NavbarI18n() {
-  const { currentLocaleLabel, availableLocales, handleLocaleChange } = useI18n()
+  const { currentLocale, availableLocales, handleLocaleChange } = useI18n()
   if (availableLocales.length === 0) return null
   return (
     <Menu.Trigger>
-      <Button variant={'outline'} iconPosition="right" icon={<ChevronDown />}>
-        {currentLocaleLabel}
+      <Button
+        variant={'outline'}
+        size="sm"
+        rounded="lg"
+        iconPosition="right"
+        icon={<ChevronDown className="w-3.5 h-3.5 text-text-muted/60" />}
+        className="h-8 border-border-subtle/60 bg-bg-surface/30 backdrop-blur-sm transition-all duration-200 hover:border-primary-500/50 hover:bg-primary-500/5 px-2.5"
+      >
+        <div className="flex items-center gap-1.5">
+          <Languages className="w-3.5 h-3.5 text-primary-500" />
+          <span className="font-bold text-[0.75rem] tracking-wider uppercase opacity-90">
+            {currentLocale || 'en'}
+          </span>
+        </div>
       </Button>
-      <Menu.Section items={availableLocales}>
-        {(locale) => (
-          <Menu.Item
-            key={`${locale.value ?? ''}`}
-            onPress={() => handleLocaleChange(locale.value)}
-          >
-            {locale.label as string}
-          </Menu.Item>
-        )}
-      </Menu.Section>
+      <Menu.Root>
+        <Menu.Section items={availableLocales}>
+          {(locale) => (
+            <Menu.Item
+              key={`${locale.value ?? ''}`}
+              onPress={() => handleLocaleChange(locale.value)}
+            >
+              <div className="flex items-center justify-between w-full gap-4">
+                <span>{locale.label as string}</span>
+                <span className="text-[10px] font-bold opacity-40 uppercase tracking-tighter">
+                  {locale.value}
+                </span>
+              </div>
+            </Menu.Item>
+          )}
+        </Menu.Section>
+      </Menu.Root>
     </Menu.Trigger>
   )
 }

package/src/client/components/ui-base/page-nav.tsx CHANGED Viewed

@@ -3,6 +3,7 @@ import PageNavPrimitive from '@components/primitives/page-nav'
 /**
  * Component to display the previous and next page navigation buttons.
+ * Enhanced with subtle entrance animations and a modern card layout.
  */
 export function PageNav() {
   const { prevPage, nextPage } = usePageNav()
@@ -10,7 +11,7 @@ export function PageNav() {
   if (!prevPage && !nextPage) return null
   return (
-    <PageNavPrimitive.PageNavRoot>
+    <PageNavPrimitive.PageNavRoot className="animate-in fade-in slide-in-from-bottom-4 duration-700">
       {prevPage ? (
         <PageNavPrimitive.PageNavLink to={prevPage.path} direction="prev">
           <PageNavPrimitive.PageNavLink.Title>

package/src/client/components/ui-base/powered-by.tsx CHANGED Viewed

@@ -2,16 +2,22 @@ import { Zap } from 'lucide-react'
 export function PoweredBy() {
   return (
-    <div className="rounded-full px-4 py-2 bg-gray-100 text-xs text-gray-500 flex items-center gap-1 mt-6 justify-center">
+    <div className="flex items-center justify-center mt-10 mb-4 px-4 w-full">
       <a
         href="https://github.com/jesusalcaladev/boltdocs"
         target="_blank"
         rel="noopener noreferrer"
-        className="flex items-center gap-1"
+        className="group relative flex items-center gap-2 px-4 py-2 rounded-full border border-border-subtle bg-bg-surface/50 backdrop-blur-md transition-all duration-300 hover:border-primary-500/50 hover:bg-bg-surface hover:shadow-xl hover:shadow-primary-500/5 select-none"
       >
-        <Zap className="powered-by-icon" size={12} fill="currentColor" />
-        <span>
-          Powered by <strong>Boltdocs</strong>
+        <Zap
+          className="w-3.5 h-3.5 text-text-muted group-hover:text-primary-500 transition-colors duration-300"
+          fill="currentColor"
+        />
+        <span className="text-[11px] font-medium text-text-muted group-hover:text-text-main transition-colors duration-300 tracking-wide">
+          Powered by{' '}
+          <strong className="font-bold text-text-main/80 group-hover:text-text-main">
+            Boltdocs
+          </strong>
         </span>
       </a>
     </div>

package/src/client/components/ui-base/search-dialog.tsx CHANGED Viewed

@@ -12,8 +12,17 @@ import {
 } from '@components/primitives/search-dialog'
 import Navbar from '@components/primitives/navbar'
 import { useNavigate } from 'react-router-dom'
+import type { ComponentRoute } from '@client/types'
+interface SearchResult {
+  id: string
+  title: string
+  path: string
+  bio: string
+  groupTitle?: string
+  isHeading?: boolean
+}
-export function SearchDialog({ routes }: { routes: any[] }) {
+export function SearchDialog({ routes }: { routes: ComponentRoute[] }) {
   const { isOpen, setIsOpen, query, setQuery, list } = useSearch(routes)
   const navigate = useNavigate()
@@ -58,10 +67,12 @@ export function SearchDialog({ routes }: { routes: any[] }) {
         <SearchDialogAutocomplete onSelectionChange={handleSelect}>
           <SearchDialogInput
             value={query}
-            onChange={(e: any) => setQuery(e.target.value)}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setQuery(e.target.value)
+            }
           />
-          <SearchDialogList items={list}>
-            {(item: any) => (
+          <SearchDialogList items={list as SearchResult[]}>
+            {(item: SearchResult) => (
               <SearchDialogItemRoot
                 key={item.id}
                 onPress={() => handleSelect(item.id)}
@@ -70,7 +81,7 @@ export function SearchDialog({ routes }: { routes: any[] }) {
                 <SearchDialogItemIcon isHeading={item.isHeading} />
                 <div className="flex flex-col justify-center gap-0.5">
                   <SearchDialogItemTitle>{item.title}</SearchDialogItemTitle>
-                  <SearchDialogItemBio>{item.groupTitle}</SearchDialogItemBio>
+                  <SearchDialogItemBio>{item.bio}</SearchDialogItemBio>
                 </div>
               </SearchDialogItemRoot>
             )}