Merge docs-v2-preview updates from fork

.cursorrules

@@ -0,0 +1,45 @@
+# Cursor Rules for Livepeer Documentation
+
+## MANDATORY: Read Style Guide Before Making Changes
+
+**BEFORE making any code, styling, or component changes, you MUST read:**
+- `v2/pages/07_resources/documentation-guide/style-guide.mdx` - Production-grade styling guidelines
+- `v2/pages/07_resources/documentation-guide/component-library.mdx` - Component reference
+
+## Critical Styling Rules
+
+1. **USE CSS Custom Properties ONLY** - Never use ThemeData or hardcode colors
+   - ✅ Use: `var(--accent)`, `var(--text)`, `var(--card-background)`
+   - ❌ Never use: `ThemeData.light.accent` or hardcoded hex colors
+
+2. **Mintlify Gotchas** - Read the style guide for all Mintlify limitations:
+   - Import paths must be absolute from root
+   - Cannot import into component files
+   - JSX files cannot import other JSX files
+   - React hooks are global (no imports needed)
+
+3. **Component Usage** - Always check component library before creating new components
+
+## Repository Structure
+
+- `v2/pages/` - Current documentation pages (MDX)
+- `snippets/components/` - Custom React/JSX components
+- `snippets/data/` - Reusable data files
+- `style.css` - Global CSS Custom Properties for theming
+- `docs.json` - Mintlify navigation configuration
+
+## Before Making Changes
+
+1. Read the style guide: `v2/pages/07_resources/documentation-guide/style-guide.mdx`
+2. Check component library: `v2/pages/07_resources/documentation-guide/component-library.mdx`
+3. Review Mintlify gotchas in style guide
+4. Use existing components when possible
+5. Follow CSS Custom Properties for all styling
+
+## Documentation Standards
+
+- Use CSS Custom Properties for all theme-aware colors
+- Follow Mintlify import patterns (absolute paths from root)
+- Test in both light and dark modes
+- No suggestions or recommendations in production docs
+- Keep production docs factual only

.githooks/README.md

@@ -0,0 +1,95 @@
+# Git Hooks - Quick Reference
+
+This directory contains git hooks for enforcing repository standards.
+
+**📖 Full Documentation:** See [docs/CONTRIBUTING/GIT-HOOKS.md](../../docs/CONTRIBUTING/GIT-HOOKS.md)
+
+## Quick Start
+
+```bash
+# Install hooks
+./.githooks/install.sh
+```
+
+## Pre-commit Hook
+
+The pre-commit hook enforces style guide compliance and runs verification scripts:
+
+### Style Guide Checks
+
+- ❌ **ThemeData usage** - Blocks deprecated ThemeData imports
+- ❌ **Hardcoded colors** - Warns about hardcoded hex colors that should use CSS variables
+- ⚠️ **Relative imports** - Warns about relative imports (should use absolute paths)
+- ⚠️ **@mintlify/components imports** - Warns about unnecessary imports (components are global)
+- ⚠️ **React hook imports** - Warns about unnecessary React imports (hooks are global)
+
+### Verification Scripts
+
+The hook also runs `.githooks/verify.sh` which checks:
+
+- ✅ **MDX syntax** - Validates frontmatter and basic MDX structure
+- ✅ **JSON syntax** - Validates JSON files are parseable
+- ✅ **Shell script syntax** - Validates shell scripts with `bash -n`
+- ✅ **JavaScript syntax** - Validates JS files with `node --check`
+- ✅ **Mintlify config** - Validates docs.json/mint.json syntax
+- ✅ **Import paths** - Ensures snippets imports use absolute paths
+- ✅ **Browser validation** - Tests MDX files in headless browser (requires `mint dev` running)
+
+## Installation
+
+To install the pre-commit hook:
+
+```bash
+cp .githooks/pre-commit .git/hooks/pre-commit
+chmod +x .git/hooks/pre-commit
+```
+
+Or use the install script:
+
+```bash
+./.githooks/install.sh
+```
+
+## Manual Installation
+
+If the install script doesn't work:
+
+```bash
+# Copy the hook
+cp .githooks/pre-commit .git/hooks/pre-commit
+
+# Make it executable
+chmod +x .git/hooks/pre-commit
+
+# Verify it's installed
+ls -la .git/hooks/pre-commit
+```
+
+## Testing
+
+Test the hook by staging a file with a violation:
+
+```bash
+# Create a test file with ThemeData (should fail)
+echo 'import { ThemeData } from "/snippets/styles/themeStyles.jsx";' > test-violation.jsx
+git add test-violation.jsx
+git commit -m "test"  # Should be blocked
+
+# Clean up
+rm test-violation.jsx
+git reset HEAD test-violation.jsx
+```
+
+## Bypassing (Not Recommended)
+
+If you absolutely must bypass the hook (not recommended):
+
+```bash
+git commit --no-verify -m "message"
+```
+
+**Warning:** Only bypass if you have a legitimate reason and understand the style guide violations.
+
+## Style Guide Reference
+
+See: `v2/pages/07_resources/documentation-guide/style-guide.mdx`

.githooks/install.sh

@@ -0,0 +1,32 @@
+#!/bin/bash
+# Install git hooks
+
+HOOKS_DIR=".git/hooks"
+SOURCE_DIR=".githooks"
+
+if [ ! -d "$HOOKS_DIR" ]; then
+    echo "Error: .git/hooks directory not found. Are you in the repository root?"
+    exit 1
+fi
+
+if [ ! -d "$SOURCE_DIR" ]; then
+    echo "Error: .githooks directory not found. Are you in the repository root?"
+    exit 1
+fi
+
+echo "Installing git hooks..."
+
+# Install pre-commit hook
+if [ -f "$SOURCE_DIR/pre-commit" ]; then
+    cp "$SOURCE_DIR/pre-commit" "$HOOKS_DIR/pre-commit"
+    chmod +x "$HOOKS_DIR/pre-commit"
+    echo "✓ Installed pre-commit hook"
+else
+    echo "✗ pre-commit hook not found in $SOURCE_DIR"
+fi
+
+echo ""
+echo "Git hooks installed successfully!"
+echo ""
+echo "The pre-commit hook will now check for style guide violations."
+echo "See .githooks/README.md for details."

.githooks/pre-commit

@@ -0,0 +1,172 @@
+#!/bin/bash
+# Pre-commit hook to enforce style guide compliance
+# Checks for common violations before allowing commits
+#
+# To install this hook, run:
+#   cp .githooks/pre-commit .git/hooks/pre-commit
+#   chmod +x .git/hooks/pre-commit
+
+STYLE_GUIDE_PATH="v2/pages/07_resources/documentation-guide/style-guide.mdx"
+VIOLATIONS=0
+WARNINGS=()
+
+# Colors for output
+RED='\033[0;31m'
+YELLOW='\033[1;33m'
+GREEN='\033[0;32m'
+NC='\033[0m' # No Color
+
+echo -e "${YELLOW}🔍 Checking style guide compliance...${NC}"
+
+# Get list of staged files
+STAGED_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep -E '\.(jsx|tsx|js|mdx)$')
+
+if [ -z "$STAGED_FILES" ]; then
+    echo -e "${GREEN}✓ No JSX/TSX/MDX files staged, skipping style checks${NC}"
+    exit 0
+fi
+
+# Check 1: ThemeData import/usage (DEPRECATED)
+echo "Checking for ThemeData usage (deprecated)..."
+for file in $STAGED_FILES; do
+    if [ -f "$file" ]; then
+        # Skip if it's the style guide itself (it documents ThemeData as deprecated)
+        if [[ "$file" == *"style-guide.mdx" ]]; then
+            continue
+        fi
+        if grep -q "ThemeData\|themeStyles\.jsx" "$file" 2>/dev/null; then
+            WARNINGS+=("❌ $file: Uses deprecated ThemeData - use CSS Custom Properties instead")
+            VIOLATIONS=$((VIOLATIONS + 1))
+        fi
+    fi
+done
+
+# Check 2: Hardcoded hex colors that should use CSS variables
+echo "Checking for hardcoded colors..."
+for file in $STAGED_FILES; do
+    if [ -f "$file" ]; then
+        # Skip style guide (it documents colors in tables)
+        if [[ "$file" == *"style-guide.mdx" ]]; then
+            continue
+        fi
+        # Check for common Livepeer colors hardcoded (should use CSS vars)
+        # Exclude markdown tables and code examples
+        if grep -E "(#3CB540|#2b9a66|#18794E|#181C18|#E0E4E0|#717571|#A0A4A0)" "$file" 2>/dev/null | grep -v "var(--" | grep -v "CSS Custom Properties" | grep -v "style-guide" | grep -v "Color System" | grep -v "Light Mode\|Dark Mode" | grep -v "^\|" | grep -v "^```" > /dev/null; then
+            WARNINGS+=("⚠️  $file: Contains hardcoded theme colors - use CSS Custom Properties (var(--accent), etc.)")
+            VIOLATIONS=$((VIOLATIONS + 1))
+        fi
+    fi
+done
+
+# Check 3: Relative imports (should be absolute from root)
+echo "Checking for relative imports..."
+for file in $STAGED_FILES; do
+    if [ -f "$file" ]; then
+        if grep -E "from ['\"].*\.\./.*['\"]" "$file" 2>/dev/null | grep -v "node_modules" | grep -v "\.\./\.\./\.\." | grep -v "examples/" > /dev/null; then
+            WARNINGS+=("⚠️  $file: Uses relative imports - use absolute paths from root (/snippets/...)")
+            VIOLATIONS=$((VIOLATIONS + 1))
+        fi
+    fi
+done
+
+# Check 4: Import from @mintlify/components (should not import, they're global)
+echo "Checking for @mintlify/components imports..."
+for file in $STAGED_FILES; do
+    if [ -f "$file" ]; then
+        # Skip style guide (it documents this as a "don't do this" example)
+        if [[ "$file" == *"style-guide.mdx" ]]; then
+            continue
+        fi
+        if grep -q "from ['\"]@mintlify/components['\"]" "$file" 2>/dev/null; then
+            WARNINGS+=("⚠️  $file: Imports from @mintlify/components - these are global, no import needed")
+            VIOLATIONS=$((VIOLATIONS + 1))
+        fi
+    fi
+done
+
+# Check 5: React imports (hooks are global in Mintlify)
+echo "Checking for unnecessary React imports..."
+for file in $STAGED_FILES; do
+    if [ -f "$file" ]; then
+        # Skip style guide (it documents this as a "don't do this" example)
+        if [[ "$file" == *"style-guide.mdx" ]]; then
+            continue
+        fi
+        if grep -E "import.*\{.*useState|useEffect|useMemo|useCallback.*\}.*from ['\"]react['\"]" "$file" 2>/dev/null; then
+            WARNINGS+=("⚠️  $file: Imports React hooks - hooks are global in Mintlify, no import needed")
+            VIOLATIONS=$((VIOLATIONS + 1))
+        fi
+    fi
+done
+
+# Run verification scripts
+echo ""
+echo -e "${YELLOW}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+echo -e "${YELLOW}Running verification scripts...${NC}"
+if [ -f ".githooks/verify.sh" ]; then
+    if bash .githooks/verify.sh; then
+        echo -e "${GREEN}✓ Verification scripts passed${NC}"
+    else
+        VERIFY_EXIT=$?
+        if [ $VERIFY_EXIT -ne 0 ]; then
+            VIOLATIONS=$((VIOLATIONS + 1))
+            WARNINGS+=("❌ Verification scripts failed - see output above")
+        fi
+    fi
+else
+    echo -e "${YELLOW}⚠️  Verification script not found, skipping...${NC}"
+fi
+echo -e "${YELLOW}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+
+# Run test suite (fast mode for pre-commit)
+echo ""
+echo -e "${YELLOW}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+echo -e "${YELLOW}Running test suite (staged files only)...${NC}"
+if [ -f "tests/run-all.js" ] && command -v node &>/dev/null; then
+    if node tests/run-all.js --staged --skip-browser 2>&1; then
+        echo -e "${GREEN}✓ Test suite passed${NC}"
+    else
+        TEST_EXIT=$?
+        if [ $TEST_EXIT -ne 0 ]; then
+            VIOLATIONS=$((VIOLATIONS + 1))
+            WARNINGS+=("❌ Test suite failed - see output above")
+        fi
+    fi
+else
+    echo -e "${YELLOW}⚠️  Test suite not available, skipping...${NC}"
+fi
+echo -e "${YELLOW}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+
+# Report results
+echo ""
+if [ $VIOLATIONS -eq 0 ]; then
+    echo -e "${GREEN}✓ Style guide compliance check passed!${NC}"
+    exit 0
+else
+    echo -e "${RED}╔═══════════════════════════════════════════════════════════════╗${NC}"
+    echo -e "${RED}║  STYLE GUIDE VIOLATIONS DETECTED - COMMIT BLOCKED           ║${NC}"
+    echo -e "${RED}╚═══════════════════════════════════════════════════════════════╝${NC}"
+    echo ""
+    echo -e "${YELLOW}Found $VIOLATIONS violation(s):${NC}"
+    echo ""
+    for warning in "${WARNINGS[@]}"; do
+        echo -e "${RED}$warning${NC}"
+    done
+    echo ""
+    echo -e "${YELLOW}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+    echo -e "${YELLOW}📖 MANDATORY: Read the Style Guide before committing:${NC}"
+    echo -e "${YELLOW}   $STYLE_GUIDE_PATH${NC}"
+    echo ""
+    echo -e "${YELLOW}Key Rules:${NC}"
+    echo -e "  • Use CSS Custom Properties: var(--accent), var(--text), etc."
+    echo -e "  • NEVER use ThemeData from themeStyles.jsx (deprecated)"
+    echo -e "  • NEVER hardcode hex colors that should adapt to theme"
+    echo -e "  • Use absolute imports: /snippets/components/..."
+    echo -e "  • Mintlify components are global (no imports needed)"
+    echo -e "  • React hooks are global (no imports needed)"
+    echo ""
+    echo -e "${YELLOW}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+    echo -e "${RED}Commit blocked. Fix violations and try again.${NC}"
+    echo ""
+    exit 1
+fi