style(docs): use font-sans in PropertyDoc, static active state in Sidebar, and JetBrains Mono font

package.json

@@ -27,6 +27,7 @@
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@fontsource-variable/inter": "^5.3.0",
+    "@fontsource-variable/jetbrains-mono": "^5.3.0",
     "@mdx-js/react": "^3.1.1",
     "@mdx-js/rollup": "^3.1.1",
     "@tailwindcss/typography": "^0.5.20",

src/index.css

@@ -1,10 +1,12 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
 @import "@fontsource-variable/inter";
+@import "@fontsource-variable/jetbrains-mono";
 @import "./dashkit/dashkit.css";
 
 @theme {
   --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
 @layer base {

src/partials/PropertyDoc.tsx

@@ -42,19 +42,19 @@ export function PropertyDoc({ title, properties, className }: PropertyDocProps)
                 className="group hover:bg-muted/20 transition-colors duration-150"
               >
                 <td className="px-4 py-3.5 align-top whitespace-nowrap border-r border-border">
-                  <code className="inline-flex items-center font-mono text-xs font-semibold text-foreground bg-muted px-2 py-0.5 rounded border border-border/60">
+                  <span className="inline-flex items-center font-sans text-xs font-semibold text-foreground bg-muted px-2 py-0.5 rounded border border-border/60">
                     {property.prop}
-                  </code>
+                  </span>
                 </td>
                 {hasType && (
                   <td className="px-4 py-3.5 align-top border-r border-border">
-                    <code className="font-mono text-xs text-primary break-words">
+                    <span className="font-sans text-xs font-medium text-primary break-words">
                       {property.type}
-                    </code>
+                    </span>
                   </td>
                 )}
                 {hasDefault && (
-                  <td className="px-4 py-3.5 align-top whitespace-nowrap font-mono text-xs border-r border-border">
+                  <td className="px-4 py-3.5 align-top whitespace-nowrap font-sans text-xs border-r border-border">
                     <span className="text-muted-foreground">
                       {property.defaultValue || '—'}
                     </span>

src/partials/Sidebar.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import { motion } from 'framer-motion';
 import { FiSearch, FiX } from 'react-icons/fi';
 import clsx from 'clsx';
 
@@ -29,7 +28,6 @@ export function Sidebar({
   sections,
   currentPath,
   onItemClick,
-  layoutId = "sidebar-active-item",
   isActive: customIsActive,
   searchable = false,
 }: SidebarProps) {
@@ -110,27 +108,20 @@ export function Sidebar({
                     className={clsx(
                       "relative px-3 py-1.5 rounded-full text-sm transition-colors duration-150 flex items-center gap-2.5 group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                       active
-                        ? "text-ds-50 dark:text-ds-950"
+                        ? "bg-ds-900 text-ds-50 dark:bg-ds-100 dark:text-ds-950"
                         : "text-muted-foreground font-medium hover:text-foreground hover:bg-card dark:hover:bg-ds-800/50",
                       link.disabled && "opacity-50 cursor-not-allowed hover:bg-transparent"
                     )}
                   >
-                    {active && (
-                      <motion.div
-                        layoutId={layoutId}
-                        className="absolute inset-0 bg-ds-900 dark:bg-ds-100 rounded-full"
-                        transition={{ type: "spring", bounce: 0, duration: 0.35 }}
-                      />
-                    )}
                     <div className={clsx(
-                      "shrink-0 transition-colors duration-150 relative z-10",
+                      "shrink-0 transition-colors duration-150",
                       active
                         ? "text-ds-50 dark:text-ds-950"
                         : "text-muted-foreground group-hover:text-foreground"
                     )}>
                       {link.icon}
                     </div>
-                    <span className="relative z-10 font-medium">{link.label}</span>
+                    <span className="font-medium">{link.label}</span>
                   </Link>
                 );
               })}