jamdesk 1.0.19 → 1.0.21

package/vendored/app/api/indexnow/[key]/route.ts

@@ -0,0 +1,34 @@
+/**
+ * IndexNow Key Verification Endpoint
+ *
+ * IndexNow fetches this URL to verify key ownership.
+ * Returns the key as plain text if it matches the project's generated key.
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { headers } from 'next/headers';
+import { isIsrMode, getProjectFromRequest } from '@/lib/page-isr-helpers';
+import { generateIndexNowKey } from '@/lib/indexnow';
+
+function notFound(): NextResponse {
+  return new NextResponse('Not found', { status: 404 });
+}
+
+export async function GET(
+  _request: NextRequest,
+  { params }: { params: Promise<{ key: string }> }
+): Promise<NextResponse> {
+  if (!isIsrMode()) return notFound();
+
+  const headersList = await headers();
+  const projectSlug = getProjectFromRequest(headersList);
+  if (!projectSlug) return notFound();
+
+  const { key } = await params;
+  const expectedKey = generateIndexNowKey(projectSlug);
+  if (key !== expectedKey) return notFound();
+
+  return new NextResponse(expectedKey, {
+    headers: { 'Content-Type': 'text/plain' },
+  });
+}

package/vendored/app/api/search-ev/route.ts

@@ -0,0 +1,69 @@
+/**
+ * Search Analytics Event Proxy
+ * Proxies to Firebase Cloud Functions via first-party domain to avoid ad blockers
+ * and CORS issues. Mirrors /api/ev but targets the search analytics function.
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+
+const ANALYTICS_ENDPOINT = 'https://us-central1-jamdesk-prod.cloudfunctions.net/trackSearchAnalytics';
+const TIMEOUT_MS = 5000;
+
+export const runtime = 'edge';
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+
+    // Forward geo headers from Vercel + User-Agent for bot detection
+    const headers: HeadersInit = {
+      'Content-Type': 'application/json',
+      'X-Analytics-Secret': process.env.ANALYTICS_SECRET || '',
+    };
+    const userAgent = request.headers.get('user-agent');
+    if (userAgent) {
+      headers['User-Agent'] = userAgent;
+    }
+    const forwardHeaders = ['x-vercel-ip-country', 'x-vercel-ip-city', 'x-forwarded-for'];
+    for (const h of forwardHeaders) {
+      const val = request.headers.get(h);
+      if (val) headers[h] = val;
+    }
+
+    // Timeout protection - don't let slow Firebase responses hang the request
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), TIMEOUT_MS);
+
+    const response = await fetch(ANALYTICS_ENDPOINT, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify(body),
+      signal: controller.signal,
+    });
+    clearTimeout(timeout);
+
+    // Handle non-JSON responses (e.g., Firebase error pages)
+    const text = await response.text();
+    try {
+      const data = JSON.parse(text);
+      return NextResponse.json(data, { status: response.status });
+    } catch {
+      console.error('[Search Analytics Proxy] Non-JSON response:', text.slice(0, 200));
+      return NextResponse.json({ success: true, proxied: false });
+    }
+  } catch (error) {
+    console.error('[Search Analytics Proxy] Error:', error);
+    return NextResponse.json({ success: true, proxied: false });
+  }
+}
+
+export async function OPTIONS() {
+  return new NextResponse(null, {
+    status: 204,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'POST, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type',
+    },
+  });
+}

package/vendored/app/layout.tsx

@@ -17,6 +17,7 @@ import type { DocsConfig, Favicon, FontConfig } from '@/lib/docs-types';
 import { ASSET_PREFIX, transformConfigImagePath } from '@/lib/docs-types';
 import { LinkPrefixProvider } from '@/lib/link-prefix-context';
 import { getAnalyticsScript } from '@/lib/analytics-script';
+import { buildSiteTitle } from '@/lib/seo';
 
 // Pre-load fonts - Next.js will tree-shake unused ones
 const inter = Inter({
@@ -47,6 +48,14 @@ function getFaviconPath(favicon: Favicon | undefined, assetVersion?: string): st
   return transformConfigImagePath(favicon.light, assetVersion) || DEFAULT_FAVICON;
 }
 
+const FALLBACK_METADATA: Metadata = {
+  title: {
+    template: '%s — Documentation',
+    default: 'Documentation',
+  },
+  description: 'Documentation',
+};
+
 export async function generateMetadata(): Promise<Metadata> {
   // Get config - from R2 in ISR mode, from filesystem in static mode
   let config: DocsConfig;
@@ -58,17 +67,10 @@ export async function generateMetadata(): Promise<Metadata> {
       try {
         config = await getIsrDocsConfig(projectSlug);
       } catch {
-        // Project not found - use minimal fallback
-        return {
-          title: 'Documentation',
-          description: 'Documentation',
-        };
+        return FALLBACK_METADATA;
       }
     } else {
-      return {
-        title: 'Documentation',
-        description: 'Documentation',
-      };
+      return FALLBACK_METADATA;
     }
   } else {
     config = getDocsConfig();
@@ -76,7 +78,10 @@ export async function generateMetadata(): Promise<Metadata> {
 
   const faviconPath = getFaviconPath(config.favicon, config.assetVersion);
   return {
-    title: `${config.name} Documentation`,
+    title: {
+      template: `%s — ${config.name}`,
+      default: buildSiteTitle(config.name),
+    },
     description: config.description || `Documentation for ${config.name}`,
     icons: {
       icon: faviconPath,
@@ -217,6 +222,43 @@ async function ConditionalGA({ gaId }: { gaId: string }) {
   }
 }
 
+// Render Plausible Analytics — supports standard (data-domain) and paid proxy (scriptUrl) modes
+function PlausibleScript({
+  domain,
+  server,
+  scriptUrl,
+}: {
+  domain?: string;
+  server?: string;
+  scriptUrl?: string;
+}): React.ReactElement {
+  // Paid proxy script mode (pa-XXXXX.js) — Plausible's CDN handles routing internally,
+  // no endpoint or data-domain needed. scriptUrl takes precedence over domain/server.
+  if (scriptUrl) {
+    return (
+      <>
+        <script async src={scriptUrl} />
+        <script dangerouslySetInnerHTML={{
+          __html: 'window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};plausible.init()',
+        }} />
+      </>
+    );
+  }
+
+  // Standard mode — data-domain with optional self-hosted server
+  const baseServer = server || 'https://plausible.io';
+  const plausibleServer = baseServer.replace(/\/+$/, '');
+  const scriptProps: Record<string, unknown> = {
+    defer: true,
+    'data-domain': domain,
+    src: `${plausibleServer}/js/script.js`,
+  };
+  if (server) {
+    scriptProps['data-api'] = `${plausibleServer}/api/event`;
+  }
+  return <script {...scriptProps} />;
+}
+
 export default async function RootLayout({
   children,
 }: {
@@ -324,8 +366,16 @@ export default async function RootLayout({
         {config.integrations?.posthog && (
           <link rel="dns-prefetch" href={config.integrations.posthog.apiHost || "https://app.posthog.com"} />
         )}
-        {config.integrations?.plausible && (
-          <link rel="dns-prefetch" href={config.integrations.plausible.server || "https://plausible.io"} />
+        {(config.integrations?.plausible?.domain || config.integrations?.plausible?.scriptUrl) && (
+          <link rel="dns-prefetch" href={(() => {
+            try {
+              return config.integrations!.plausible!.scriptUrl
+                ? new URL(config.integrations!.plausible!.scriptUrl).origin
+                : config.integrations!.plausible!.server || "https://plausible.io";
+            } catch {
+              return config.integrations!.plausible!.server || "https://plausible.io";
+            }
+          })()} />
         )}
         {config.integrations?.intercom && (
           <link rel="dns-prefetch" href="https://widget.intercom.io" />
@@ -427,6 +477,14 @@ export default async function RootLayout({
         {analyticsScript && (
           <script dangerouslySetInnerHTML={{ __html: analyticsScript }} />
         )}
+        {/* Plausible Analytics */}
+        {(config.integrations?.plausible?.domain || config.integrations?.plausible?.scriptUrl) && (
+          <PlausibleScript
+            domain={config.integrations.plausible.domain}
+            server={config.integrations.plausible.server}
+            scriptUrl={config.integrations.plausible.scriptUrl}
+          />
+        )}
       </head>
       <body className={fontClassName} data-theme={themeName || 'jam'}>
         {/* Google Tag Manager */}

package/vendored/components/chat/ChatInput.tsx

@@ -71,7 +71,7 @@ export const ChatInput = memo(function ChatInput({ onSend, onAbort, isLoading, d
           placeholder="Ask a question…"
           disabled={disabled}
           rows={1}
-          className="flex-1 resize-none bg-transparent text-sm text-[var(--color-text-primary)] placeholder-[var(--color-text-muted)] outline-none py-2 min-h-[36px]"
+          className="flex-1 resize-none bg-transparent text-base text-[var(--color-text-primary)] placeholder-[var(--color-text-muted)] outline-none py-2 min-h-[36px]"
           aria-label="Chat message"
           maxLength={MAX_LENGTH + 100} // Allow slight overshoot for UX, enforce on send
         />

package/vendored/components/chat/ChatPanel.tsx

@@ -1,13 +1,17 @@
 'use client';
 
-import { useRef, useEffect, useCallback } from 'react';
+import { useRef, useEffect, useLayoutEffect, useCallback } from 'react';
 import { useChat } from '@/hooks/useChat';
+import { useBodyScrollLock } from '@/hooks/useBodyScrollLock';
 import { ChatMessage } from './ChatMessage';
 import { ChatInput } from './ChatInput';
 import { ChatEmptyState } from './ChatEmptyState';
 
 const SOMETHING_ELSE_PATTERNS = ['something else', 'none of the above', 'none of these'];
 
+/** If visualViewport shrinks below this fraction of innerHeight, assume the virtual keyboard is open. */
+const KEYBOARD_VIEWPORT_THRESHOLD = 0.85;
+
 /**
  * Rewrite generic "something else" / "none of the above" options to a more
  * descriptive message so Claude gets useful follow-up context.
@@ -37,16 +41,61 @@ interface ChatPanelProps {
  */
 export function ChatPanel({ isOpen, onClose, starterQuestions, chatEndpoint, mode = 'overlay' }: ChatPanelProps) {
   const { messages, sendMessage, isLoading, abort, retry, clearChat, error, markClarificationSelected } = useChat(chatEndpoint);
-  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLDivElement>(null);
+  const overlayPanelRef = useRef<HTMLDivElement>(null);
+
+  const isInline = mode === 'inline';
 
-  // Auto-scroll to bottom when new messages arrive — debounced to avoid
-  // scroll thrashing during SSE streaming (messages changes per animation frame)
+  // Lock body scroll when mobile overlay is open
+  useBodyScrollLock(!isInline && isOpen);
+
+  // On iOS, the virtual keyboard doesn't resize the layout viewport, so the
+  // panel's max-h-[80dvh] can extend behind the keyboard. When the user taps the
+  // textarea, iOS scrolls the page to reveal it — pushing the fixed panel off-screen.
+  // Fix: use the visualViewport API to shrink the panel above the keyboard, and
+  // snap window scroll back to 0 to prevent the page from shifting.
   useEffect(() => {
-    const id = requestAnimationFrame(() => {
-      messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-    });
-    return () => cancelAnimationFrame(id);
+    if (isInline || !isOpen) return;
+    const vv = window.visualViewport;
+    const panel = overlayPanelRef.current;
+    if (!vv || !panel) return;
+
+    const update = () => {
+      const keyboardLikelyOpen = vv.height < window.innerHeight * KEYBOARD_VIEWPORT_THRESHOLD;
+      if (keyboardLikelyOpen) {
+        // 16px matches the top-4 offset on the panel's Tailwind class
+        panel.style.maxHeight = `${vv.height - 16}px`;
+      } else {
+        panel.style.maxHeight = '';
+      }
+      // iOS scrolls the page even with overflow:hidden to reveal focused inputs.
+      // Snap back instantly (override html { scroll-behavior: smooth } from base.css).
+      if (window.scrollY !== 0) {
+        window.scrollTo({ top: 0, behavior: 'instant' });
+      }
+    };
+
+    vv.addEventListener('resize', update);
+    vv.addEventListener('scroll', update);
+    window.addEventListener('scroll', update);
+
+    return () => {
+      vv.removeEventListener('resize', update);
+      vv.removeEventListener('scroll', update);
+      window.removeEventListener('scroll', update);
+      panel.style.maxHeight = '';
+    };
+  }, [isOpen, isInline]);
+
+  // Auto-scroll to bottom when new messages arrive. Uses useLayoutEffect so
+  // scrollHeight is accurate (DOM is updated) and there's no visible 1-frame lag.
+  // Scrolls the container directly instead of scrollIntoView to avoid scrolling
+  // ancestor elements (which pushes the panel off-screen on mobile).
+  useLayoutEffect(() => {
+    const container = messagesContainerRef.current;
+    if (!container) return;
+    container.scrollTop = container.scrollHeight;
   }, [messages]);
 
   // Escape key handling is in useChatPanel (capture phase, with search-modal awareness)
@@ -69,7 +118,6 @@ export function ChatPanel({ isOpen, onClose, starterQuestions, chatEndpoint, mod
   }, [markClarificationSelected, sendMessage]);
 
   const hasMessages = messages.length > 0;
-  const isInline = mode === 'inline';
 
   // Shared panel content (header, messages, error, input)
   const panelContent = (
@@ -103,6 +151,7 @@ export function ChatPanel({ isOpen, onClose, starterQuestions, chatEndpoint, mod
 
       {/* Messages area */}
       <div
+        ref={messagesContainerRef}
         className="flex-1 overflow-y-auto min-h-0"
         style={{ overscrollBehavior: 'contain' }}
         aria-live="polite"
@@ -117,7 +166,6 @@ export function ChatPanel({ isOpen, onClose, starterQuestions, chatEndpoint, mod
                 onSelectOption={handleSelectOption}
               />
             ))}
-            <div ref={messagesEndRef} />
           </div>
         ) : (
           <ChatEmptyState
@@ -180,6 +228,7 @@ export function ChatPanel({ isOpen, onClose, starterQuestions, chatEndpoint, mod
 
       {/* Panel */}
       <div
+        ref={overlayPanelRef}
         role="dialog"
         aria-label="AI Chat"
         aria-hidden={!isOpen}
@@ -187,7 +236,7 @@ export function ChatPanel({ isOpen, onClose, starterQuestions, chatEndpoint, mod
         data-open={isOpen}
         data-chat-panel
         className={`
-          fixed z-[55] flex flex-col
+          fixed z-[55] flex flex-col overflow-hidden
           transition-all duration-200
           inset-x-2 top-4 max-h-[80dvh] rounded-2xl shadow-xl border border-[var(--color-border)]
           lg:inset-x-auto lg:top-0 lg:max-h-none lg:rounded-none lg:shadow-none lg:border-0

package/vendored/components/mdx/Update.tsx

@@ -1,35 +1,35 @@
+import { generateSlug } from '@/lib/heading-extractor';
+
 interface UpdateProps {
   label?: string;
   description?: string;
   tags?: string[];
+  date?: string;       // ISO date for RSS pubDate (e.g., "2025-03-15")
   children?: React.ReactNode;
 }
 
 /**
  * Generates a URL-friendly slug from a label string.
  * Used to create anchor IDs for Update components.
+ * Uses shared generateSlug to stay in sync with TOC and link validation.
  */
 export function generateUpdateId(label?: string): string | undefined {
   if (!label) return undefined;
-  const slug = label
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '');
-  // Return undefined if the result is empty (e.g., label was only special characters)
-  return slug || undefined;
+  return generateSlug(label) || undefined;
 }
 
 /**
  * Update component - for changelog/whatsnew entries.
  * Creates timeline-style entries with automatic anchor links and TOC integration.
  */
-export function Update({ label, description, tags, children }: UpdateProps) {
+export function Update({ label, description, tags, date, children }: UpdateProps) {
   const id = generateUpdateId(label);
 
   return (
     <div
       id={id}
       data-update-label={label}
+      data-update-date={date}
       className="my-8 flex flex-col sm:flex-row gap-1 not-prose scroll-mt-20"
     >
       {/* Date badge - stacked on mobile, left side on desktop */}

package/vendored/components/navigation/Sidebar.tsx

@@ -4,6 +4,7 @@ import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react'
 import Link from 'next/link';
 import Image from 'next/image';
 import { usePathname, useRouter } from 'next/navigation';
+import { useBodyScrollLock } from '@/hooks/useBodyScrollLock';
 // Icons use Font Awesome CSS classes for lightweight rendering
 import type { 
   DocsConfig, 
@@ -291,16 +292,7 @@ export function Sidebar({ config, layout = 'header-logo', tabsPosition: tabsPosi
   }, [activePathname]);
 
   // Prevent body scroll when sidebar is open on mobile
-  useEffect(() => {
-    if (isOpen) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = '';
-    }
-    return () => {
-      document.body.style.overflow = '';
-    };
-  }, [isOpen]);
+  useBodyScrollLock(isOpen);
 
   // Toggle group expansion; if expanding, navigate to first page
   const handleGroupClick = useCallback((group: ResolvedGroup) => {

package/vendored/components/navigation/TableOfContents.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState, useRef, useCallback } from 'react';
 import { getIconClass } from '@/lib/icon-utils';
+import { generateSlug } from '@/lib/heading-extractor';
 
 interface TocItem {
   id: string;
@@ -195,54 +196,66 @@ export function TableOfContents({ content, className = '' }: TableOfContentsProp
     return () => observer.disconnect();
   }, [updateThumb]);
 
-  // Parse headings from content immediately, then scan DOM for dynamic components
+  // Parse headings from content in source order, then scan DOM for dynamic components
   useEffect(() => {
+    // Line-by-line pass to preserve source order and skip fenced code blocks
     const items: TocItem[] = [];
-    const headingRegex = /^(#{2,3})\s+(.+)$/gm;
-    let match;
-    while ((match = headingRegex.exec(content)) !== null) {
-      const level = match[1].length;
-      const text = match[2].trim();
-      const id = text
-        .toLowerCase()
-        .replace(/[^a-z0-9]+/g, '-')
-        .replace(/^-+|-+$/g, '');
-      items.push({ id, text, level });
-    }
+    const lines = content.split('\n');
+    let inCodeBlock = false;
+    let fencePattern = '';
+
+    for (const line of lines) {
+      const fenceMatch = line.match(/^(`{3,}|~{3,})/);
+      if (fenceMatch) {
+        if (!inCodeBlock) {
+          inCodeBlock = true;
+          fencePattern = fenceMatch[1];
+          continue;
+        } else if (line.startsWith(fencePattern)) {
+          inCodeBlock = false;
+          fencePattern = '';
+          continue;
+        }
+      }
+      if (inCodeBlock) continue;
+
+      const headingMatch = line.match(/^(#{2,3})\s+(.+)$/);
+      if (headingMatch) {
+        const level = headingMatch[1].length;
+        const text = headingMatch[2].trim();
+        const id = generateSlug(text);
+        if (id) items.push({ id, text, level });
+      }
 
-    const updateRegex = /<Update\s+label=["']([^"']+)["']/g;
-    while ((match = updateRegex.exec(content)) !== null) {
-      const text = match[1];
-      const id = text
-        .toLowerCase()
-        .replace(/[^a-z0-9]+/g, '-')
-        .replace(/^-+|-+$/g, '');
-      items.push({ id, text, level: 2 });
+      const updateMatch = line.match(/<Update\s+label=["']([^"']+)["']/);
+      if (updateMatch) {
+        const text = updateMatch[1];
+        const id = generateSlug(text);
+        if (id) items.push({ id, text, level: 2 });
+      }
     }
 
     setHeadings(items);
 
+    // DOM scan: single query to get all TOC elements in document order
     const scanDomHeadings = () => {
-      const domHeadings = document.querySelectorAll('main h2[id], main h3[id]');
+      const tocElements = document.querySelectorAll('main h2[id], main h3[id], main [data-update-label]');
       const newItems: TocItem[] = [];
       const seenDomIds = new Set<string>();
 
-      domHeadings.forEach((heading) => {
-        const id = heading.id;
-        const text = heading.textContent?.trim() || '';
-        if (!text || !id || seenDomIds.has(id)) return;
-        seenDomIds.add(id);
-        const level = heading.tagName === 'H2' ? 2 : 3;
-        newItems.push({ id, text, level });
-      });
-
-      const updateElements = document.querySelectorAll('main [data-update-label]');
-      updateElements.forEach((element) => {
+      tocElements.forEach((element) => {
         const id = element.id;
-        const text = element.getAttribute('data-update-label') || '';
-        if (!text || !id || seenDomIds.has(id)) return;
-        newItems.push({ id, text, level: 2 });
+        if (!id || seenDomIds.has(id)) return;
+
+        const isUpdate = element.hasAttribute('data-update-label');
+        const text = isUpdate
+          ? (element.getAttribute('data-update-label') || '')
+          : (element.textContent?.trim() || '');
+        if (!text) return;
+
         seenDomIds.add(id);
+        const level = isUpdate ? 2 : (element.tagName === 'H2' ? 2 : 3);
+        newItems.push({ id, text, level });
       });
 
       if (newItems.length > 0) {

package/vendored/components/search/SearchModal.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState, useRef, type ReactElement } from 'react';
 import { useRouter } from 'next/navigation';
 import { getRecentSearches, addRecentSearch, clearRecentSearches } from '@/lib/recent-searches';
 import { useFocusTrap } from '@/hooks/useFocusTrap';
+import { useBodyScrollLock } from '@/hooks/useBodyScrollLock';
 import { getSuggestions } from '@/lib/search-suggestions';
 import { trackSearch } from '@/lib/analytics-client';
 import { useLinkPrefix } from '@/lib/link-prefix-context';
@@ -123,6 +124,7 @@ export function SearchModal({ isOpen, onClose, popularPages, onNavigate }: Searc
 
   // Focus trap for accessibility
   useFocusTrap(modalRef, isOpen);
+  useBodyScrollLock(isOpen);
 
   // Close on Escape
   useEffect(() => {
@@ -165,7 +167,7 @@ export function SearchModal({ isOpen, onClose, popularPages, onNavigate }: Searc
 
       const init = async () => {
         try {
-          const [{ initializeSearch, isInitialized }, response] = await Promise.all([
+          const [{ initializeSearch, getLastData }, response] = await Promise.all([
             import('@/lib/search-client'),
             fetch(`${linkPrefix}/search-data.json`),
           ]);
@@ -174,10 +176,12 @@ export function SearchModal({ isOpen, onClose, popularPages, onNavigate }: Searc
             throw new Error(`Failed to fetch search data: ${response.status}`);
           }
 
-          if (!isInitialized()) {
-            const data = await response.json();
-            await initializeSearch(data);
-          }
+          // If the ETag matches we already have the current data in memory —
+          // pass it back to initializeSearch so the fingerprint check short-circuits.
+          const etag = response.headers.get('etag') ?? '';
+          const lastData = getLastData(etag);
+          const data = lastData ?? await response.json();
+          await initializeSearch(data, etag);
         } catch (error) {
           console.error('Failed to initialize search:', error);
           setInitError('Search is temporarily unavailable');

package/vendored/components/ui/CodePanelModal.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState, useRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { codePanelColors, extractTextContent, getStatusColor, type CodePanelTab } from './CodePanel';
+import { useBodyScrollLock } from '@/hooks/useBodyScrollLock';
 
 interface CodePanelModalProps {
   isOpen: boolean;
@@ -55,31 +56,21 @@ export function CodePanelModal({ isOpen, onClose, tabs, title, initialTabIndex =
     }
   }, [isOpen, initialTabIndex]);
 
-  // Body scroll lock + focus management
+  // Lock body scroll when modal is open
+  useBodyScrollLock(isOpen);
+
+  // Focus management
   useEffect(() => {
     if (!isOpen) return;
 
-    // Save current focus
     previousFocusRef.current = document.activeElement as HTMLElement;
 
-    // Lock body scroll
-    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-    document.body.style.overflow = 'hidden';
-    if (scrollbarWidth > 0) {
-      document.body.style.paddingRight = `${scrollbarWidth}px`;
-    }
-
-    // Focus close button
     setTimeout(() => {
       const closeBtn = modalRef.current?.querySelector<HTMLButtonElement>('[aria-label="Close modal"]');
       closeBtn?.focus();
     }, 0);
 
     return () => {
-      // Restore scroll
-      document.body.style.overflow = '';
-      document.body.style.paddingRight = '';
-      // Restore focus
       previousFocusRef.current?.focus();
     };
   }, [isOpen]);