jamdesk 1.1.7 → 1.1.8

package/vendored/components/mdx/Video.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import React, { useEffect, useRef } from 'react';
+
+/** Shared with preprocess-mdx.ts — keep in sync or extract to shared module */
+export const VIDEO_EXTENSIONS = ['.mp4', '.webm'];
+
+interface VideoProps {
+  src: string;
+  title?: string;
+  /** Default: true */
+  controls?: boolean;
+  /** Browsers block unmuted autoplay — pair with muted */
+  autoPlay?: boolean;
+  muted?: boolean;
+  loop?: boolean;
+  width?: string;
+  height?: string;
+}
+
+/**
+ * HTML5 video player for embedded video files.
+ *
+ * Markdown ![alt](/videos/demo.mp4) is converted to <Video> JSX by the
+ * preprocessor (transformMarkdownVideos). The img handler in MDXComponents
+ * has a fallback isVideoUrl check for raw <img src="video.mp4"> in MDX.
+ *
+ * muted is set via useRef/useEffect — React doesn't reflect it as a DOM
+ * attribute (https://github.com/facebook/react/issues/6544).
+ */
+export function Video({
+  src,
+  title,
+  controls = true,
+  autoPlay,
+  muted,
+  loop,
+  width,
+  height,
+}: VideoProps): React.ReactElement | null {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    if (videoRef.current) {
+      if (muted) {
+        videoRef.current.setAttribute('muted', '');
+      } else {
+        videoRef.current.removeAttribute('muted');
+      }
+    }
+  }, [muted]);
+
+  if (!src) {
+    console.warn('Video component requires a "src" prop');
+    return null;
+  }
+
+  // Append #t=0.1 to force browsers to decode and display a preview frame.
+  // Without it, Chrome/Safari often show a black rectangle with preload="metadata".
+  const srcWithPreview = src.includes('#') ? src : `${src}#t=0.1`;
+
+  // No <div> wrapper — markdown syntax can place this inside a <p>, and
+  // <p><div> is invalid HTML (causes hydration errors).
+  return (
+    <video
+      ref={videoRef}
+      data-testid="video-player"
+      src={srcWithPreview}
+      controls={controls}
+      autoPlay={autoPlay}
+      loop={loop}
+      width={width}
+      height={height}
+      preload="metadata"
+      playsInline
+      aria-label={title}
+      className="my-6 rounded-xl w-full border border-theme-border"
+    >
+      Your browser does not support the video tag.
+    </video>
+  );
+}

package/vendored/components/navigation/Header.tsx

@@ -16,7 +16,7 @@ import { LanguageSelector } from './LanguageSelector';
 import { resolveNavigation } from '@/lib/navigation-resolver';
 import { getIconClass } from '@/lib/icon-utils';
 import { useLinkPrefix } from '@/lib/link-prefix-context';
-import { useChatPanel } from '@/hooks/useChatPanel';
+import { useChatOpenHandler } from '@/hooks/useChatPanel';
 
 interface HeaderProps {
   config: DocsConfig;
@@ -36,8 +36,7 @@ const MOBILE_ICON_BUTTON = 'lg:hidden p-2 text-[var(--color-text-muted)] hover:t
 const COMPACT_ICON_BUTTON = 'hidden md:flex p-2 hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] rounded-lg transition-colors cursor-pointer';
 
 export function Header({ config, layout = 'header-logo', tabsPosition: tabsPositionProp, isSidebarOpen, onToggleSidebar }: HeaderProps) {
-  const { chatEnabled: chatContextEnabled, setIsChatOpen } = useChatPanel();
-  const onChatOpen = chatContextEnabled ? () => setIsChatOpen(true) : undefined;
+  const { onChatOpen, devNotice } = useChatOpenHandler();
   const [isSearchOpen, setIsSearchOpen] = useState(false);
   const [logoError, setLogoError] = useState(false);
   const [isDark, setIsDark] = useState(false);
@@ -542,6 +541,7 @@ export function Header({ config, layout = 'header-logo', tabsPosition: tabsPosit
         onClose={() => setIsSearchOpen(false)}
         popularPages={config.search?.popularPages}
       />
+      {devNotice}
     </>
   );
 }

package/vendored/components/navigation/Sidebar.tsx

@@ -30,7 +30,7 @@ import { ThemeToggle, ThemeToggleCycle } from '@/components/theme/ThemeToggle';
 import { getIconClass } from '@/lib/icon-utils';
 import { getTabsFromConfig } from '@/lib/navigation-utils';
 import { useLinkPrefix } from '@/lib/link-prefix-context';
-import { useChatPanel } from '@/hooks/useChatPanel';
+import { useChatOpenHandler } from '@/hooks/useChatPanel';
 
 interface SidebarProps {
   config: DocsConfig;
@@ -150,8 +150,7 @@ export function Sidebar({ config, layout = 'header-logo', tabsPosition: tabsPosi
   const linkPrefix = useLinkPrefix();
 
   // Chat panel state — used for Pulsar sidebar AI button
-  const { chatEnabled, setIsChatOpen } = useChatPanel();
-  const onChatOpen = chatEnabled ? () => setIsChatOpen(true) : undefined;
+  const { onChatOpen, devNotice } = useChatOpenHandler();
 
   // Optimistic navigation: immediately highlight clicked link while page loads.
   // Strips hash fragments so anchor links (e.g. /page#section) match pathname.
@@ -750,6 +749,7 @@ export function Sidebar({ config, layout = 'header-logo', tabsPosition: tabsPosi
 
       {/* Search Modal - shown when search is opened from sidebar */}
       <SearchModal isOpen={isSearchOpen} onClose={() => setIsSearchOpen(false)} onNavigate={handleNavigate} />
+      {devNotice}
     </>
   );
 }

package/vendored/components/ui/CodePanel.tsx

@@ -279,7 +279,7 @@ export function CodePanel({
               {enableFullscreen && (
                 <button
                   onClick={() => setIsModalOpen(true)}
-                  className="p-1.5 rounded-md transition-colors flex-shrink-0"
+                  className="p-1.5 rounded-md transition-colors flex-shrink-0 cursor-pointer"
                   style={{ color: codePanelColors.textMuted }}
                   onMouseEnter={(e) => {
                     e.currentTarget.style.backgroundColor = codePanelColors.tabHoverBg;
@@ -298,7 +298,7 @@ export function CodePanel({
               {/* Copy Button */}
               <button
                 onClick={handleCopy}
-                className={`p-1.5 rounded-md transition-colors flex-shrink-0 ${enableFullscreen ? 'ml-1' : ''}`}
+                className={`p-1.5 rounded-md transition-colors flex-shrink-0 cursor-pointer ${enableFullscreen ? 'ml-1' : ''}`}
                 style={{ color: codePanelColors.textMuted }}
                 onMouseEnter={(e) => {
                   e.currentTarget.style.backgroundColor = codePanelColors.tabHoverBg;
@@ -348,7 +348,7 @@ export function CodePanel({
                 <button
                   key={index}
                   onClick={() => handleTabClick(index)}
-                  className="px-1 py-1 font-medium transition-colors whitespace-nowrap flex items-center"
+                  className="px-1 py-1 font-medium transition-colors whitespace-nowrap flex items-center cursor-pointer"
                   style={{
                     color: isActive ? activeColor : codePanelColors.textMuted,
                     cursor: 'pointer',
@@ -407,7 +407,7 @@ export function CodePanel({
           {enableFullscreen && (
             <button
               onClick={() => setIsModalOpen(true)}
-              className="p-1.5 rounded-md transition-colors flex-shrink-0 ml-auto"
+              className="p-1.5 rounded-md transition-colors flex-shrink-0 ml-auto cursor-pointer"
               style={{ color: codePanelColors.textMuted }}
               onMouseEnter={(e) => {
                 e.currentTarget.style.backgroundColor = codePanelColors.tabHoverBg;
@@ -426,7 +426,7 @@ export function CodePanel({
           {/* Fixed copy button */}
           <button
             onClick={handleCopy}
-            className={`p-1.5 rounded-md transition-colors flex-shrink-0 ${enableFullscreen ? 'ml-1' : 'ml-auto'}`}
+            className={`p-1.5 rounded-md transition-colors flex-shrink-0 cursor-pointer ${enableFullscreen ? 'ml-1' : 'ml-auto'}`}
             style={{ color: codePanelColors.textMuted }}
             onMouseEnter={(e) => {
               e.currentTarget.style.backgroundColor = codePanelColors.tabHoverBg;

package/vendored/components/ui/CodePanelModal.tsx

@@ -198,7 +198,7 @@ export function CodePanelModal({ isOpen, onClose, tabs, title, initialTabIndex =
                       <button
                         key={index}
                         onClick={() => setActiveTab(index)}
-                        className="px-3 py-1.5 rounded-md text-sm font-medium transition-colors"
+                        className="px-3 py-1.5 rounded-md text-sm font-medium transition-colors cursor-pointer"
                         style={{
                           backgroundColor: activeTab === index ? codePanelColors.tabActiveBg : 'transparent',
                           color: activeTab === index ? codePanelColors.text : codePanelColors.textMuted,
@@ -226,7 +226,7 @@ export function CodePanelModal({ isOpen, onClose, tabs, title, initialTabIndex =
               {/* Copy Button */}
               <button
                 onClick={handleCopy}
-                className="p-2 rounded-md transition-colors"
+                className="p-2 rounded-md transition-colors cursor-pointer"
                 style={{ color: codePanelColors.textMuted }}
                 onMouseEnter={(e) => {
                   e.currentTarget.style.backgroundColor = codePanelColors.tabHoverBg;
@@ -249,7 +249,7 @@ export function CodePanelModal({ isOpen, onClose, tabs, title, initialTabIndex =
               {/* Close Button */}
               <button
                 onClick={handleClose}
-                className="p-2 rounded-md transition-colors"
+                className="p-2 rounded-md transition-colors cursor-pointer"
                 style={{ color: codePanelColors.textMuted }}
                 onMouseEnter={(e) => {
                   e.currentTarget.style.backgroundColor = codePanelColors.tabHoverBg;

package/vendored/components/ui/DevOnlyNotice.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+/**
+ * DevOnlyNotice
+ *
+ * A toast-like popup shown when users click features that are only available
+ * in production (e.g., API playground, AI chat). Appears briefly, then
+ * auto-dismisses. Used in local dev / CLI mode where the backend
+ * infrastructure (proxy endpoints, Upstash Vector, etc.) isn't available.
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+
+/** Feature names for production-only features. */
+export const DEV_FEATURE = {
+  AI_CHAT: 'AI Chat',
+  API_PLAYGROUND: 'API Playground',
+} as const;
+
+interface DevOnlyNoticeProps {
+  feature: string;
+  onDismiss: () => void;
+}
+
+function DevOnlyNotice({ feature, onDismiss }: DevOnlyNoticeProps) {
+  useEffect(() => {
+    const timer = setTimeout(onDismiss, 4000);
+    return () => clearTimeout(timer);
+  }, [onDismiss]);
+
+  return (
+    <div
+      role="alert"
+      style={{
+        position: 'fixed',
+        bottom: '1.5rem',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        zIndex: 1000010,
+        background: 'var(--color-bg-primary, #fff)',
+        border: '1px solid var(--color-border, #e2e8f0)',
+        borderRadius: '8px',
+        padding: '0.75rem 1.25rem',
+        boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+        fontSize: '0.8125rem',
+        color: 'var(--color-text-primary, #1e293b)',
+        maxWidth: '400px',
+        textAlign: 'center',
+        animation: 'devNoticeIn 0.2s ease-out',
+      }}
+    >
+      <div style={{ fontWeight: 600, marginBottom: '0.25rem' }}>
+        {feature} is available in production
+      </div>
+      <div style={{ color: 'var(--color-text-muted, #64748b)', fontSize: '0.75rem' }}>
+        Deploy your docs to see this feature live.
+      </div>
+      <style>{`@keyframes devNoticeIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }`}</style>
+    </div>
+  );
+}
+
+/**
+ * Hook that returns a trigger function and the notice element.
+ * Call `showNotice()` to display the toast for a given feature.
+ */
+export function useDevOnlyNotice() {
+  const [activeFeature, setActiveFeature] = useState<string | null>(null);
+  const dismiss = useCallback(() => setActiveFeature(null), []);
+
+  const showNotice = setActiveFeature;
+
+  const notice = activeFeature ? (
+    <DevOnlyNotice feature={activeFeature} onDismiss={dismiss} />
+  ) : null;
+
+  return { showNotice, notice };
+}

package/vendored/hooks/useChatPanel.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react';
+import { useDevOnlyNotice, DEV_FEATURE } from '@/components/ui/DevOnlyNotice';
 
 const MIN_WIDTH = 350;
 const MAX_WIDTH = 500;
@@ -61,8 +62,9 @@ export function ChatPanelProvider({ children, chatEnabled, chatEndpoint, starter
 
   // Keyboard shortcuts: Cmd+I / Ctrl+I to toggle, Escape to close
   // Uses capture phase for Escape so it fires before SearchModal's bubble-phase handler
+  const isDevMode = process.env.NODE_ENV !== 'production';
   useEffect(() => {
-    if (!chatEnabled) return;
+    if (!chatEnabled || isDevMode) return;
 
     const handler = (e: KeyboardEvent) => {
       // Cmd+I / Ctrl+I — toggle chat
@@ -81,7 +83,7 @@ export function ChatPanelProvider({ children, chatEnabled, chatEndpoint, starter
     };
     document.addEventListener('keydown', handler, true); // capture phase
     return () => document.removeEventListener('keydown', handler, true);
-  }, [chatEnabled, isChatOpen]);
+  }, [chatEnabled, isChatOpen, isDevMode]);
 
   return (
     <ChatPanelContext.Provider value={{ isChatOpen, setIsChatOpen, chatWidth, setChatWidth, chatEnabled, chatEndpoint, starterQuestions }}>
@@ -99,3 +101,20 @@ export function useChatPanel(): ChatPanelContextValue {
 }
 
 export { MIN_WIDTH, MAX_WIDTH, DEFAULT_WIDTH };
+
+/**
+ * Returns a chat-open handler that shows DevOnlyNotice in dev mode
+ * instead of opening the panel. Used by Header and Sidebar.
+ */
+export function useChatOpenHandler() {
+  const { chatEnabled, setIsChatOpen } = useChatPanel();
+  const { showNotice, notice } = useDevOnlyNotice();
+  const isDevMode = process.env.NODE_ENV !== 'production';
+
+  const onChatOpen = chatEnabled ? () => {
+    if (isDevMode) { showNotice(DEV_FEATURE.AI_CHAT); return; }
+    setIsChatOpen(true);
+  } : undefined;
+
+  return { onChatOpen, devNotice: notice };
+}

package/vendored/hooks/useMediaQuery.ts

@@ -0,0 +1,27 @@
+'use client';
+
+import { useCallback, useSyncExternalStore } from 'react';
+
+/**
+ * SSR-safe media query hook using useSyncExternalStore.
+ *
+ * Returns true when the viewport matches the given CSS media query string,
+ * false otherwise. Returns false on the server (getServerSnapshot).
+ */
+export function useMediaQuery(query: string): boolean {
+  const subscribe = useCallback((callback: () => void) => {
+    if (typeof window === 'undefined') return () => {};
+    const mql = window.matchMedia(query);
+    mql.addEventListener('change', callback);
+    return () => mql.removeEventListener('change', callback);
+  }, [query]);
+
+  const getSnapshot = useCallback(() => {
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia(query).matches;
+  }, [query]);
+
+  const getServerSnapshot = useCallback(() => false, []);
+
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}

package/vendored/lib/build-endpoint-from-mdx.ts

@@ -0,0 +1,66 @@
+import type { OpenApiEndpointData, ParsedParameter, ParsedRequestBody } from './openapi/types';
+import type { ExtractedParam } from './remark-extract-param-fields';
+
+/**
+ * Build an OpenApiEndpointData from extracted ParamField data and api: frontmatter.
+ *
+ * Bridges `api:` pages (MDX-defined endpoints) into the same data structure
+ * that the playground consumes for `openapi:` pages.
+ *
+ * Known limitation: only top-level <ParamField> components are supported.
+ * Nested ParamFields (inside <Expandable> etc.) are extracted as flat fields.
+ */
+export function buildEndpointFromMdx(
+  method: string,
+  path: string,
+  params: ExtractedParam[],
+  serverUrl?: string,
+): OpenApiEndpointData {
+  const bodyParams = params.filter(p => p.in === 'body');
+  const nonBodyParams = params.filter(p => p.in !== 'body');
+
+  const parameters: ParsedParameter[] = nonBodyParams.map(p => ({
+    name: p.name,
+    in: p.in as 'path' | 'query' | 'header' | 'cookie',
+    required: p.required,
+    schema: {
+      type: p.type,
+      ...(p.default !== undefined ? { default: p.default } : {}),
+    },
+  }));
+
+  let requestBody: ParsedRequestBody | undefined;
+  if (bodyParams.length > 0) {
+    const properties: Record<string, { type?: string }> = {};
+    const required: string[] = [];
+    for (const p of bodyParams) {
+      properties[p.name] = {
+        type: p.type,
+        ...(p.default !== undefined ? { default: p.default } : {}),
+      };
+      if (p.required) required.push(p.name);
+    }
+    requestBody = {
+      required: required.length > 0,
+      content: {
+        'application/json': {
+          schema: {
+            type: 'object',
+            properties,
+            ...(required.length > 0 ? { required } : {}),
+          },
+        },
+      },
+    };
+  }
+
+  return {
+    method: method as OpenApiEndpointData['method'],
+    path,
+    parameters,
+    requestBody,
+    responses: {},
+    servers: serverUrl ? [{ url: serverUrl }] : [],
+    security: [],
+  };
+}

package/vendored/lib/isr-build-executor.ts

@@ -62,7 +62,7 @@ export async function collectMdxFiles(
  * @returns Array of asset file paths relative to projectDir
  */
 export async function collectAssetFiles(projectDir: string): Promise<string[]> {
-  const files = await glob('**/*.{png,jpg,jpeg,gif,svg,webp,ico}', {
+  const files = await glob('**/*.{png,jpg,jpeg,gif,svg,webp,ico,mp4,webm}', {
     cwd: projectDir,
     ignore: ['node_modules/**', '.git/**'],
   });

package/vendored/lib/middleware-helpers.ts

@@ -491,7 +491,7 @@ export function buildProjectHeaders(
 /**
  * Asset extensions that need to be routed to the assets API.
  */
-const ASSET_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.ico', '.pdf'];
+const ASSET_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.ico', '.pdf', '.mp4', '.webm'];
 
 /**
  * Project-specific files that need to be fetched from R2 via assets API.
@@ -522,6 +522,11 @@ export function isAssetRequest(pathname: string): boolean {
     return true;
   }
 
+  // Project videos under /_jd/videos/ are served from R2
+  if (pathname.startsWith(`${ASSET_PREFIX}/videos/`)) {
+    return true;
+  }
+
   // Project-specific files from R2, or files with asset extensions
   return (
     PROJECT_SPECIFIC_FILES.includes(pathname) ||