jamdesk 1.0.0

package/vendored/components/mdx/Callouts.tsx

@@ -0,0 +1,140 @@
+import { getIconClass } from '@/lib/icon-utils';
+
+interface CalloutProps {
+  children: React.ReactNode;
+}
+
+interface CustomCalloutProps extends CalloutProps {
+  icon?: string;
+  color?: string;
+}
+
+// Base callout styles - items-baseline aligns icon with text baseline (centers for single line, top for multi-line)
+const baseStyles = "rounded-lg border px-4 py-3 my-4 flex items-baseline gap-3 not-prose";
+
+// Link styles for callouts - underline to distinguish from plain text
+const linkStyles = "[&_a]:underline [&_a]:decoration-current/50 [&_a:hover]:decoration-current";
+
+// Icon wrapper - no special sizing needed with baseline alignment
+const iconWrapperStyles = "flex-shrink-0";
+
+// Content styles
+// List and paragraph styles are handled in base.css (.callout-content rules)
+const contentStyles = "text-sm callout-content flex-1 [&>*:first-child]:!mt-0 [&>*:last-child:not(.badge)]:!mb-0 [&_.badge]:!mt-2";
+
+// Note - informational callout (blue)
+export function Note({ children }: CalloutProps) {
+  return (
+    <div className={`${baseStyles} border-[var(--color-note-border)] bg-[var(--color-note-bg)]`}>
+      <div className={iconWrapperStyles}>
+        <i className="fa-light fa-circle-exclamation text-[var(--color-note-text)]" aria-hidden="true" />
+      </div>
+      <div className={`${contentStyles} text-[var(--color-note-text)] ${linkStyles}`}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// Info - draws attention to important information (blue)
+export function Info({ children }: CalloutProps) {
+  return (
+    <div className={`${baseStyles} border-[var(--color-info-border)] bg-[var(--color-info-bg)]`}>
+      <div className={iconWrapperStyles}>
+        <i className="fa-solid fa-circle-info text-[var(--color-info-text)]" aria-hidden="true" />
+      </div>
+      <div className={`${contentStyles} text-[var(--color-info-text)] ${linkStyles}`}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// Warning - raises a warning (amber/yellow)
+export function Warning({ children }: CalloutProps) {
+  return (
+    <div className={`${baseStyles} border-[var(--color-warning-border)] bg-[var(--color-warning-bg)]`}>
+      <div className={iconWrapperStyles}>
+        <i className="fa-solid fa-triangle-exclamation text-[var(--color-warning-text)]" aria-hidden="true" />
+      </div>
+      <div className={`${contentStyles} text-[var(--color-warning-text)] ${linkStyles}`}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// Tip - suggests a helpful tip (green)
+export function Tip({ children }: CalloutProps) {
+  return (
+    <div className={`${baseStyles} border-[var(--color-success-border)] bg-[var(--color-success-bg)]`}>
+      <div className={iconWrapperStyles}>
+        <i className="fa-solid fa-lightbulb text-[var(--color-success-text)]" aria-hidden="true" />
+      </div>
+      <div className={`${contentStyles} text-[var(--color-success-text)] ${linkStyles}`}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// Check - indicates success or completion (green)
+export function Check({ children }: CalloutProps) {
+  return (
+    <div className={`${baseStyles} border-[var(--color-success-border)] bg-[var(--color-success-bg)]`}>
+      <div className={iconWrapperStyles}>
+        <i className="fa-solid fa-circle-check text-[var(--color-success-text)]" aria-hidden="true" />
+      </div>
+      <div className={`${contentStyles} text-[var(--color-success-text)] ${linkStyles}`}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// Danger - indicates danger or critical warning (red)
+export function Danger({ children }: CalloutProps) {
+  return (
+    <div className={`${baseStyles} border-[var(--color-error-border)] bg-[var(--color-error-bg)]`}>
+      <div className={iconWrapperStyles}>
+        <i className="fa-solid fa-octagon-exclamation text-[var(--color-error-text)]" aria-hidden="true" />
+      </div>
+      <div className={`${contentStyles} text-[var(--color-error-text)] ${linkStyles}`}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// Custom Callout - allows custom icon and color
+export function Callout({ children, icon, color }: CustomCalloutProps) {
+  // Use custom color or default to accent color
+  const iconColor = color || 'var(--color-accent)';
+  const bgColor = color ? `${color}15` : 'var(--color-accent-muted)';
+  const borderColor = color ? `${color}40` : 'var(--color-accent-border)';
+  const iconClass = icon ? getIconClass(icon) : 'fa-solid fa-circle-info';
+
+  return (
+    <div
+      className={`${baseStyles}`}
+      style={{
+        borderColor: borderColor,
+        backgroundColor: bgColor,
+      }}
+    >
+      <div className={iconWrapperStyles}>
+        <i
+          className={iconClass}
+          style={{ color: iconColor }}
+          aria-hidden="true"
+        />
+      </div>
+      <div
+        className={`${contentStyles} ${linkStyles}`}
+        style={{ color: iconColor }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

package/vendored/components/mdx/Card.tsx

@@ -0,0 +1,214 @@
+'use client';
+
+import { memo } from 'react';
+import { useRouter } from 'next/navigation';
+import { getIconClass } from '@/lib/icon-utils';
+import { useLinkPrefix } from '@/lib/link-prefix-context';
+
+interface CardProps {
+  title?: string;
+  icon?: string | React.ReactElement;
+  img?: string;
+  href?: string;
+  children?: React.ReactNode;
+  horizontal?: boolean;
+  ariaLabel?: string;
+  arrow?: boolean | string;
+  cta?: string;
+}
+
+export const Card = memo(function Card({ title, icon, img, href, children, horizontal, ariaLabel, arrow, cta }: CardProps) {
+  const router = useRouter();
+  const linkPrefix = useLinkPrefix();
+  const isExternalLink = href?.startsWith('http://') || href?.startsWith('https://');
+  const showArrow = arrow === true || arrow === 'true' || (arrow === undefined && isExternalLink);
+
+  const cardContent = (
+    <div
+      className="group"
+      style={{
+        position: 'relative',
+        borderRadius: 'var(--radius-lg)',
+        border: 'var(--border-width, 1px) solid var(--color-border)',
+        overflow: 'hidden',
+        height: '100%',
+        display: 'flex',
+        flexDirection: horizontal ? 'row' : 'column',
+        alignItems: horizontal ? 'center' : undefined,
+        cursor: href ? 'pointer' : undefined,
+        boxShadow: 'var(--shadow-lg)',
+        transition: 'border-color 0.15s ease',
+      }}
+      onMouseEnter={(e) => href && (e.currentTarget.style.borderColor = 'var(--color-primary)')}
+      onMouseLeave={(e) => href && (e.currentTarget.style.borderColor = 'var(--color-border)')}
+    >
+      {showArrow && href && (
+        <div
+          className="arrow-icon"
+          style={{
+            position: 'absolute',
+            top: '0.75rem',
+            right: '0.75rem',
+            color: cta ? 'var(--color-border)' : 'var(--color-text-muted)',
+            transition: 'color 0.15s ease',
+          }}
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M7 17L17 7" />
+            <path d="M7 7h10v10" />
+          </svg>
+        </div>
+      )}
+      {img && (
+        <img
+          src={img}
+          alt={title || ''}
+          style={{
+            display: 'block',
+            width: horizontal ? '33.333%' : '100%',
+            height: 'auto',
+            objectFit: 'cover',
+            margin: 0,
+            flexShrink: horizontal ? 0 : undefined,
+          }}
+        />
+      )}
+      <div
+        style={{
+          flex: 1,
+          padding: '1rem',
+          display: (horizontal && !img) || (!horizontal && !img) ? 'flex' : undefined,
+          flexDirection: (!horizontal && !img) ? 'column' : undefined,
+          alignItems: (horizontal && !img) ? 'center' : undefined,
+          gap: (horizontal && !img) ? '1rem' : (!horizontal && !img) ? '0.5rem' : undefined,
+        }}
+      >
+        {icon && !img && (
+          <div style={{ flexShrink: horizontal ? 0 : undefined, display: horizontal ? 'flex' : undefined, alignItems: horizontal ? 'center' : undefined }}>
+            {typeof icon === 'string' ? (
+              <i className={getIconClass(icon)} style={{ fontSize: '24px', color: 'var(--color-primary)', lineHeight: 1 }} aria-hidden="true" />
+            ) : (
+              <span style={{ display: 'inline-flex', alignItems: 'center', width: 24, height: 24, color: 'var(--color-primary)' }}>
+                {icon}
+              </span>
+            )}
+          </div>
+        )}
+        <div style={{ flex: 1 }}>
+          {title && (
+            <div style={{ fontSize: '16px', lineHeight: 1.375, fontWeight: 600, color: 'var(--color-text-primary)', marginBottom: children ? '0.25rem' : undefined }}>
+              {title}
+            </div>
+          )}
+          {children && (
+            <div className="card-content" style={{ fontSize: '1rem', fontWeight: 300, color: 'var(--color-text-tertiary)', lineHeight: 1.375 }}>
+              {children}
+            </div>
+          )}
+          {cta && href && (
+            <div
+              className="cta-text"
+              style={{
+                marginTop: '0.75rem',
+                fontSize: '14px',
+                fontWeight: 400,
+                color: 'var(--color-text-secondary)',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '0.25rem',
+                transition: 'color 0.15s ease',
+              }}
+            >
+              {cta}
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M9 18l6-6-6-6" />
+              </svg>
+            </div>
+          )}
+        </div>
+      </div>
+      <style jsx global>{`
+        .group:hover .arrow-icon {
+          color: var(--color-primary) !important;
+        }
+        .group:hover .cta-text {
+          color: var(--color-primary) !important;
+        }
+        .card-content > p {
+          margin: 0 0 0.75rem 0;
+          font-weight: 300;
+          line-height: 1.375;
+        }
+        .card-content > p:last-child {
+          margin-bottom: 0;
+        }
+        .card-content > *:first-child {
+          margin-top: 0;
+        }
+        .card-content > *:last-child {
+          margin-bottom: 0;
+        }
+        .card-content ul,
+        .card-content ol {
+          margin: 0.5rem 0 !important;
+          padding-left: 0 !important;
+          margin-left: 0 !important;
+          list-style-position: inside !important;
+        }
+        .card-content ul {
+          list-style-type: disc !important;
+        }
+        .card-content ol {
+          list-style-type: decimal !important;
+        }
+        .card-content li {
+          margin-bottom: 0.25rem !important;
+          padding-left: 1rem !important;
+        }
+        .card-content li::before {
+          left: 0 !important;
+        }
+        .card-content li p {
+          line-height: 1.375 !important;
+          margin: 0 !important;
+        }
+        .card-content > strong {
+          font-weight: 600;
+          color: var(--color-text-secondary);
+        }
+        .card-content > a {
+          color: var(--color-accent);
+          text-decoration: none;
+        }
+      `}</style>
+    </div>
+  );
+
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!href) return;
+    const target = e.target as HTMLElement;
+    if (target.closest('a') || target.closest('button')) {
+      return;
+    }
+    if (isExternalLink) {
+      window.open(href, '_blank', 'noopener,noreferrer');
+    } else {
+      // Prefix absolute internal links (starting with /) with linkPrefix
+      const targetHref = href.startsWith('/') ? `${linkPrefix}${href}` : href;
+      router.push(targetHref);
+    }
+  };
+
+  return (
+    <div
+      style={{ margin: '1rem 0', height: '100%' }}
+      onClick={handleClick}
+      role={href ? 'link' : undefined}
+      aria-label={href ? (ariaLabel || (title ? `Learn about ${title}` : undefined)) : undefined}
+      tabIndex={href ? 0 : undefined}
+      onKeyDown={href ? (e) => { if (e.key === 'Enter' || e.key === ' ') handleClick(e as any); } : undefined}
+    >
+      {cardContent}
+    </div>
+  );
+});

package/vendored/components/mdx/CodeGroup.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import { ReactNode, Children, isValidElement, memo } from 'react';
+import { CodePanel, CodePanelTab } from '../ui/CodePanel';
+import { formatLanguage } from '@/lib/code-utils';
+import { getLanguageIcon } from '@/lib/language-icons';
+
+interface CodeGroupProps {
+  children: ReactNode;
+}
+
+/**
+ * Extract raw language identifier from a pre element
+ * Priority: data-language > className language-*
+ */
+function getRawLanguage(child: ReactNode): string | undefined {
+  if (!isValidElement(child)) return undefined;
+
+  const childProps = child.props as any;
+
+  // Check for data-language on the pre element (added by Shiki transformer)
+  const preLanguage = childProps['data-language'];
+  if (preLanguage) return preLanguage;
+
+  const codeElement = childProps?.children;
+  if (!isValidElement(codeElement)) return undefined;
+
+  const codeProps = codeElement.props as any;
+
+  // Fall back to language from className (pre-Shiki format)
+  const className = codeProps?.className || '';
+  const match = className.match(/language-(\w+)/);
+  if (match) return match[1];
+
+  return undefined;
+}
+
+/**
+ * Extract custom icon from a pre element's code child
+ * Returns data-icon attribute if present
+ */
+function getCustomIcon(child: ReactNode): string | undefined {
+  if (!isValidElement(child)) return undefined;
+
+  const childProps = child.props as any;
+  const codeElement = childProps?.children;
+
+  if (!isValidElement(codeElement)) return undefined;
+
+  const codeProps = codeElement.props as any;
+  return codeProps['data-icon'];
+}
+
+/**
+ * Extract title from a pre element's code child
+ * Returns data-title attribute if present (e.g., title="utils.js")
+ */
+function getTitle(child: ReactNode): string | undefined {
+  if (!isValidElement(child)) return undefined;
+
+  const childProps = child.props as any;
+  const codeElement = childProps?.children;
+
+  if (!isValidElement(codeElement)) return undefined;
+
+  const codeProps = codeElement.props as any;
+  return codeProps['data-title'];
+}
+
+/**
+ * Extract tab label from a pre element
+ * Priority: data-language > data-meta > className language-*
+ */
+function getTabLabel(child: ReactNode): string {
+  if (!isValidElement(child)) return 'Code';
+
+  const childProps = child.props as any;
+
+  // Check for data-language on the pre element (added by Shiki transformer)
+  const preLanguage = childProps['data-language'];
+  if (preLanguage) {
+    return formatLanguage(preLanguage);
+  }
+
+  const codeElement = childProps?.children;
+  if (!isValidElement(codeElement)) return 'Code';
+
+  const codeProps = codeElement.props as any;
+
+  // Check for title in data-meta or meta props (e.g., "Success Response")
+  const metaString = codeProps['data-meta'] || codeProps.meta || '';
+  if (metaString) {
+    return metaString;
+  }
+
+  // Fall back to language name from className (pre-Shiki format)
+  const className = codeProps?.className || '';
+  const match = className.match(/language-(\w+)/);
+
+  if (match) {
+    return formatLanguage(match[1]);
+  }
+
+  return 'Code';
+}
+
+/**
+ * CodeGroup wraps multiple code blocks in a tabbed interface.
+ * Uses the shared CodePanel component for consistent styling.
+ */
+export const CodeGroup = memo(function CodeGroup({ children }: CodeGroupProps) {
+  // Extract code blocks from children
+  const codeBlocks = Children.toArray(children).filter(
+    (child) => isValidElement(child) && child.type === 'pre'
+  );
+
+  if (codeBlocks.length === 0) {
+    return <div>{children}</div>;
+  }
+
+  // Convert code blocks to CodePanel tabs
+  // Note: Icons disabled by default - can be enabled via docs.json in future
+  const tabs: CodePanelTab[] = codeBlocks.map((block) => {
+    const language = getRawLanguage(block);
+    return {
+      label: getTabLabel(block),
+      content: block as ReactNode,
+      language,
+    };
+  });
+
+  // Extract title from first code block (only shown for single blocks)
+  const title = codeBlocks.length === 1 ? getTitle(codeBlocks[0]) : undefined;
+
+  return <CodePanel tabs={tabs} title={title} className="my-6" enableFullscreen />;
+});