Add PresentationSlideContent component

Create dedicated component for rendering slide content with consistent layout. Handles title positioning, visual element containers, and caption placement. Prepares for future slide content abstraction.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: ofriw

website/src/components/PresentationMode/PresentationSlideContent.module.css

@@ -0,0 +1,61 @@
+/**
+ * Presentation slide content wrapper styles
+ *
+ * Provides reusable layout primitive for all presentation slide content.
+ * Replaces scattered centering and container patterns in RevealSlideshow.
+ */
+
+/* Base container - flexbox with configurable alignment */
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  overflow: hidden; /* Constrain to slide boundaries by default */
+}
+
+/* Content wrapper - handles scaling and centering */
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+/* Allow content to overflow slide boundaries (for scrollable content) */
+.allowOverflow {
+  overflow: visible;
+}
+
+.allowOverflow .content {
+  overflow: visible;
+}
+
+/* GPU optimization for smooth slide transitions */
+.gpuOptimized {
+  will-change: transform;
+  contain: layout paint;
+  transform: translateZ(0);
+}
+
+/* Responsive adjustments for edge cases */
+@media (max-width: 768px) {
+  .container {
+    max-width: 95%;
+  }
+}
+
+/* Accessibility - disable transforms for reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .gpuOptimized {
+    will-change: auto;
+    transform: none;
+  }
+
+  .content {
+    transform: none !important;
+  }
+}

website/src/components/PresentationMode/PresentationSlideContent.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import type { PresentationLayoutConfig } from './types';
+import styles from './PresentationSlideContent.module.css';
+
+/**
+ * Props for PresentationSlideContent wrapper component
+ */
+export interface PresentationSlideContentProps {
+  /** Child content to render within the slide layout */
+  children: React.ReactNode;
+
+  /** Layout configuration (alignment, overflow, scaling, sizing) */
+  config?: PresentationLayoutConfig;
+
+  /** CSS class name to apply to the container */
+  className?: string;
+
+  /** Enable GPU optimization for smooth animations */
+  gpuOptimized?: boolean;
+}
+
+/**
+ * Wrapper component for presentation slide content
+ *
+ * Provides consistent layout, spacing, and positioning for all slide types.
+ * Eliminates the need for ad-hoc centering classes and visual containers.
+ *
+ * Features:
+ * - Vertical alignment control (flex-start, center, space-between, etc.)
+ * - Overflow handling (scrollable vs constrained)
+ * - Content scaling for visual prominence
+ * - Max width/height constraints
+ * - GPU optimization for smooth transitions
+ *
+ * Usage:
+ * ```tsx
+ * <PresentationSlideContent
+ *   config={{
+ *     verticalAlign: 'center',
+ *     scaleContent: 1.5,
+ *     maxWidthPercent: 90
+ *   }}
+ * >
+ *   <MyVisualComponent compact />
+ * </PresentationSlideContent>
+ * ```
+ */
+export const PresentationSlideContent: React.FC<
+  PresentationSlideContentProps
+> = ({ children, config = {}, className = '', gpuOptimized = false }) => {
+  const {
+    verticalAlign = 'flex-start',
+    allowOverflow = false,
+    scaleContent = 1.0,
+    maxWidthPercent = 90,
+    maxHeightPercent = 85,
+  } = config;
+
+  // Build CSS classes
+  const containerClasses = [
+    styles.container,
+    gpuOptimized && styles.gpuOptimized,
+    allowOverflow && styles.allowOverflow,
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  // Build inline styles for dynamic configuration
+  const containerStyle: React.CSSProperties = {
+    justifyContent: verticalAlign,
+    maxWidth: `${maxWidthPercent}%`,
+    maxHeight: `${maxHeightPercent}%`,
+  };
+
+  const contentStyle: React.CSSProperties =
+    scaleContent !== 1.0
+      ? {
+          transform: `scale(${scaleContent})`,
+          transformOrigin: 'center center',
+        }
+      : {};
+
+  return (
+    <div className={containerClasses} style={containerStyle}>
+      <div className={styles.content} style={contentStyle}>
+        {children}
+      </div>
+    </div>
+  );
+};