@djangocfg/ui-nextjs 2.1.82 → 2.1.83

package/src/tools/AudioPlayer/@refactoring/04-COMPONENTS.md

@@ -1,251 +0,0 @@
-# Phase 5: Components Reorganization
-
-## Overview
-
-Move all components to `components/` folder and split `AudioReactiveCover` into subcomponents.
-
----
-
-## Files to Move (with import updates)
-
-| Current | New Location | Changes |
-|---------|--------------|---------|
-| `AudioPlayer.tsx` | `components/AudioPlayer.tsx` | Update imports |
-| `AudioEqualizer.tsx` | `components/AudioEqualizer.tsx` | Update imports |
-| `SimpleAudioPlayer.tsx` | `components/SimpleAudioPlayer.tsx` | Update imports |
-| `AudioShortcutsPopover.tsx` | `components/ShortcutsPopover.tsx` | Rename + update imports |
-| `VisualizationToggle.tsx` | `components/VisualizationToggle.tsx` | Update imports |
-
----
-
-## `AudioReactiveCover` Split
-
-Current: 390 lines with 4 inline effect components.
-
-### `components/ReactiveCover/index.tsx`
-
-Main component (~100 lines).
-
-```typescript
-'use client';
-
-import { type ReactNode } from 'react';
-import { cn } from '@djangocfg/ui-nextjs';
-import { useAudioElement } from '../../context';
-import {
-  getEffectConfig,
-  prepareEffectColors,
-  EFFECT_ANIMATIONS,
-} from '../../effects';
-import type { EffectVariant, EffectIntensity, EffectColorScheme } from '../../types';
-
-import { GlowEffect } from './GlowEffect';
-import { OrbsEffect } from './OrbsEffect';
-import { SpotlightEffect } from './SpotlightEffect';
-import { MeshEffect } from './MeshEffect';
-
-// ... Props and constants ...
-
-export function AudioReactiveCover({
-  children,
-  size = 'lg',
-  variant = 'spotlight',
-  intensity = 'medium',
-  colorScheme = 'primary',
-  onClick,
-  className,
-}: AudioReactiveCoverProps) {
-  const { isPlaying, audioLevels: levels } = useAudioElement();
-
-  const sizeConfig = SIZES[size];
-  const effectConfig = getEffectConfig(intensity);
-  const { colors, hueShift } = prepareEffectColors(colorScheme, levels);
-  const containerScale = 1 + levels.overall * effectConfig.scale;
-
-  return (
-    <div
-      className={cn('relative', sizeConfig.container, className)}
-      style={{
-        transform: `scale(${containerScale})`,
-        transition: 'transform 0.1s ease-out',
-      }}
-    >
-      {variant === 'glow' && (
-        <GlowEffect
-          levels={levels}
-          config={effectConfig}
-          colors={colors}
-          hueShift={hueShift}
-          isPlaying={isPlaying}
-        />
-      )}
-
-      {variant === 'orbs' && (
-        <OrbsEffect
-          levels={levels}
-          config={effectConfig}
-          colors={colors}
-          baseSize={sizeConfig.orbBase}
-          isPlaying={isPlaying}
-        />
-      )}
-
-      {variant === 'spotlight' && (
-        <SpotlightEffect
-          levels={levels}
-          config={effectConfig}
-          colors={colors}
-          isPlaying={isPlaying}
-        />
-      )}
-
-      {variant === 'mesh' && (
-        <MeshEffect
-          levels={levels}
-          config={effectConfig}
-          colors={colors}
-          isPlaying={isPlaying}
-        />
-      )}
-
-      {/* Content */}
-      <div
-        className="relative w-full h-full rounded-lg overflow-hidden shadow-2xl z-10 bg-background cursor-pointer"
-        onClick={onClick}
-        role={onClick ? 'button' : undefined}
-        tabIndex={onClick ? 0 : undefined}
-        onKeyDown={onClick ? (e) => e.key === 'Enter' && onClick() : undefined}
-      >
-        {children}
-      </div>
-
-      <style dangerouslySetInnerHTML={{ __html: EFFECT_ANIMATIONS }} />
-    </div>
-  );
-}
-```
-
-### `components/ReactiveCover/GlowEffect.tsx`
-
-```typescript
-'use client';
-
-import { cn } from '@djangocfg/ui-nextjs';
-import { calculateGlowLayers } from '../../effects';
-import type { AudioLevels, EffectConfig } from '../../types';
-
-interface GlowEffectProps {
-  levels: AudioLevels;
-  config: EffectConfig;
-  colors: string[];
-  hueShift: number;
-  isPlaying: boolean;
-}
-
-export function GlowEffect({ levels, config, colors, hueShift, isPlaying }: GlowEffectProps) {
-  const layers = calculateGlowLayers(levels, config, colors);
-  const showPulseRings = levels.bass > 0.5;
-  const showSparkle = levels.high > 0.4;
-
-  return (
-    <>
-      {/* Main glow layers */}
-      {layers.map((layer, i) => (
-        <div
-          key={i}
-          className={cn('absolute rounded-2xl -z-10', layer.blur)}
-          style={{
-            inset: `-${layer.inset}px`,
-            background: layer.background,
-            opacity: isPlaying ? layer.opacity : 0,
-            transform: i < 2 ? `scaleY(${layer.scale})` : `scale(${layer.scale})`,
-            animation: isPlaying && layer.animation ? layer.animation : 'none',
-            transition: 'opacity 0.3s',
-          }}
-        />
-      ))}
-
-      {/* Rotating color sweep */}
-      <div
-        className="absolute rounded-2xl blur-xl overflow-hidden -z-10"
-        style={{
-          inset: '-75px',
-          opacity: isPlaying ? 0.6 : 0,
-          transition: 'opacity 0.5s',
-        }}
-      >
-        <div
-          className="absolute inset-0"
-          style={{
-            background: `conic-gradient(
-              from ${hueShift}deg at 50% 50%,
-              hsl(${colors[0]} / 0.4) 0deg,
-              hsl(${colors[1] || colors[0]} / 0.3) 90deg,
-              hsl(${colors[2] || colors[0]} / 0.3) 180deg,
-              hsl(${colors[3] || colors[0]} / 0.3) 270deg,
-              hsl(${colors[0]} / 0.4) 360deg
-            )`,
-            animation: isPlaying ? 'glow-rotate 6s linear infinite' : 'none',
-          }}
-        />
-      </div>
-
-      {/* Pulse rings on bass hits */}
-      {showPulseRings && (
-        <>
-          <div
-            className="absolute -inset-6 rounded-xl border-2 animate-ping -z-10"
-            style={{
-              borderColor: `hsl(${colors[0]} / 0.4)`,
-              animationDuration: '1s',
-            }}
-          />
-          <div
-            className="absolute -inset-12 rounded-2xl border animate-ping -z-10"
-            style={{
-              borderColor: `hsl(${colors[1] || colors[0]} / 0.3)`,
-              animationDuration: '1.5s',
-              animationDelay: '0.2s',
-            }}
-          />
-        </>
-      )}
-
-      {/* Sparkle on high frequencies */}
-      {showSparkle && (
-        <div
-          className="absolute -inset-18 rounded-3xl -z-10"
-          style={{
-            background: `radial-gradient(circle at 50% 30%, hsl(${colors[2] || colors[0]} / 0.5) 0%, transparent 30%)`,
-            animation: 'sparkle-move 0.5s ease-out',
-          }}
-        />
-      )}
-    </>
-  );
-}
-```
-
-### Similar split for:
-- `components/ReactiveCover/OrbsEffect.tsx`
-- `components/ReactiveCover/SpotlightEffect.tsx`
-- `components/ReactiveCover/MeshEffect.tsx`
-
----
-
-## `components/index.ts`
-
-```typescript
-// Main components
-export { AudioPlayer } from './AudioPlayer';
-export { AudioEqualizer } from './AudioEqualizer';
-export { SimpleAudioPlayer } from './SimpleAudioPlayer';
-export type { SimpleAudioPlayerProps } from './SimpleAudioPlayer';
-
-// ReactiveCover
-export { AudioReactiveCover } from './ReactiveCover';
-
-// UI components
-export { ShortcutsPopover as AudioShortcutsPopover } from './ShortcutsPopover';
-export { VisualizationToggle } from './VisualizationToggle';
-```

package/src/tools/AudioPlayer/@refactoring/05-EFFECTS.md

@@ -1,427 +0,0 @@
-# Phase 6: Effects Refactoring
-
-## Source: `effects/index.ts` (413 lines)
-
-Split into 3 files by concern.
-
----
-
-## `effects/constants.ts`
-
-Configuration constants (~60 lines).
-
-```typescript
-import type { EffectIntensity, EffectColorScheme, EffectConfig } from '../types';
-
-// =============================================================================
-// INTENSITY CONFIGURATION
-// =============================================================================
-
-export const INTENSITY_CONFIG: Record<EffectIntensity, EffectConfig> = {
-  subtle: { opacity: 0.3, scale: 0.02, blur: 'blur-2xl' },
-  medium: { opacity: 0.5, scale: 0.04, blur: 'blur-xl' },
-  strong: { opacity: 0.7, scale: 0.06, blur: 'blur-lg' },
-};
-
-// =============================================================================
-// COLOR SCHEMES
-// =============================================================================
-
-export const COLOR_SCHEMES: Record<EffectColorScheme, string[]> = {
-  primary: ['217 91% 60%'],
-  vibrant: ['217 91% 60%', '142 76% 36%', '262 83% 58%', '25 95% 53%'],
-  cool: ['217 91% 60%', '262 83% 58%', '199 89% 48%'],
-  warm: ['25 95% 53%', '0 84% 60%', '38 92% 50%'],
-};
-
-// Default multi-color palette
-export const DEFAULT_GLOW_COLORS = [
-  '217 91% 60%',  // Blue
-  '262 83% 58%',  // Purple
-  '330 81% 60%',  // Pink
-  '25 95% 53%',   // Orange
-];
-
-// =============================================================================
-// HELPERS
-// =============================================================================
-
-export function getEffectConfig(intensity: EffectIntensity): EffectConfig {
-  return INTENSITY_CONFIG[intensity];
-}
-
-export function getColors(colorScheme: EffectColorScheme): string[] {
-  return COLOR_SCHEMES[colorScheme];
-}
-```
-
----
-
-## `effects/calculations.ts`
-
-Effect calculation functions (~250 lines).
-
-```typescript
-import type {
-  AudioLevels,
-  EffectConfig,
-  EffectColors,
-  EffectLayer,
-  Orb,
-  MeshGradient,
-  SpotlightData,
-  EffectColorScheme,
-} from '../types';
-import { COLOR_SCHEMES, DEFAULT_GLOW_COLORS } from './constants';
-
-// =============================================================================
-// PREPARE EFFECT COLORS
-// =============================================================================
-
-export function prepareEffectColors(
-  colorScheme: EffectColorScheme,
-  levels: AudioLevels
-): EffectColors {
-  const baseColors = COLOR_SCHEMES[colorScheme];
-  const colors = baseColors.length > 1 ? baseColors : DEFAULT_GLOW_COLORS;
-  const hueShift = Math.floor(
-    (levels.bass * 30) + (levels.mid * 20) + (levels.high * 10)
-  );
-
-  return { colors, hueShift };
-}
-
-// =============================================================================
-// GLOW LAYERS
-// =============================================================================
-
-export function calculateGlowLayers(
-  levels: AudioLevels,
-  config: EffectConfig,
-  colors: string[]
-): EffectLayer[] {
-  const { bass, mid, high } = levels;
-
-  return [
-    // Layer 1: Bass glow - bottom
-    {
-      inset: 60 + bass * 90,
-      opacity: 1,
-      scale: 1 + bass * 0.5,
-      background: `radial-gradient(ellipse 80% 60% at 50% 100%, hsl(${colors[0]} / ${0.4 + bass * 0.4}) 0%, transparent 70%)`,
-      blur: 'blur-3xl',
-    },
-    // Layer 2: Mid glow - top
-    {
-      inset: 45 + mid * 75,
-      opacity: 1,
-      scale: 1 + mid * 0.4,
-      background: `radial-gradient(ellipse 70% 50% at 50% 0%, hsl(${colors[1] || colors[0]} / ${0.3 + mid * 0.5}) 0%, transparent 70%)`,
-      blur: 'blur-2xl',
-    },
-    // Layer 3: High glow - left
-    {
-      inset: 30 + high * 60,
-      opacity: 1,
-      scale: 1 + high * 0.3,
-      background: `radial-gradient(ellipse 50% 80% at 0% 50%, hsl(${colors[2] || colors[0]} / ${0.3 + high * 0.4}) 0%, transparent 60%)`,
-      blur: 'blur-2xl',
-    },
-    // Layer 4: High glow - right
-    {
-      inset: 30 + high * 60,
-      opacity: 1,
-      scale: 1 + high * 0.3,
-      background: `radial-gradient(ellipse 50% 80% at 100% 50%, hsl(${colors[3] || colors[0]} / ${0.3 + high * 0.4}) 0%, transparent 60%)`,
-      blur: 'blur-2xl',
-    },
-    // Layer 5: Center pulsing glow
-    {
-      inset: 24 + bass * 45,
-      opacity: 1,
-      scale: 1 + bass * 0.2,
-      background: `radial-gradient(circle at 50% 50%, hsl(${colors[0]} / ${0.2 + bass * 0.3}) 0%, hsl(${colors[1] || colors[0]} / ${0.1 + mid * 0.2}) 40%, transparent 70%)`,
-      blur: 'blur-xl',
-      animation: 'glow-breathe 2s ease-in-out infinite',
-    },
-  ];
-}
-
-// =============================================================================
-// ORBS
-// =============================================================================
-
-export function calculateOrbs(
-  levels: AudioLevels,
-  config: EffectConfig,
-  colors: string[],
-  baseSize: number = 50
-): Orb[] {
-  const { bass, mid, high, overall } = levels;
-  const size = baseSize * 3;
-
-  const bassMove = bass * 30;
-  const midMove = mid * 25;
-  const highMove = high * 20;
-
-  return [
-    {
-      x: -40 + bassMove,
-      y: -40 - bassMove * 0.5,
-      size: size * (1 + bass * 1.2),
-      color: colors[0],
-      opacity: 0.5 + bass * 0.5,
-      scale: 1 + bass * 0.6,
-    },
-    {
-      x: 130 - midMove * 0.5,
-      y: -30 + midMove,
-      size: size * (0.9 + mid * 1.0),
-      color: colors[1] || colors[0],
-      opacity: 0.5 + mid * 0.5,
-      scale: 1 + mid * 0.5,
-    },
-    {
-      x: 140 + highMove * 0.3,
-      y: 120 - highMove,
-      size: size * (0.8 + high * 0.8),
-      color: colors[2] || colors[0],
-      opacity: 0.4 + high * 0.6,
-      scale: 1 + high * 0.45,
-    },
-    {
-      x: -30 - midMove * 0.4,
-      y: 130 + midMove * 0.3,
-      size: size * (0.9 + mid * 0.9),
-      color: colors[3] || colors[0],
-      opacity: 0.45 + mid * 0.55,
-      scale: 1 + mid * 0.5,
-    },
-    {
-      x: 50,
-      y: 50,
-      size: size * (0.6 + overall * 1.5),
-      color: colors[0],
-      opacity: 0.3 + overall * 0.5,
-      scale: 1 + overall * 0.7,
-    },
-  ];
-}
-
-// =============================================================================
-// MESH GRADIENTS
-// =============================================================================
-
-export function calculateMeshGradients(
-  levels: AudioLevels,
-  config: EffectConfig,
-  colors: string[]
-): MeshGradient[] {
-  const { bass, mid, high, overall } = levels;
-
-  const bassOffset = bass * 40;
-  const midOffset = mid * 30;
-  const highOffset = high * 25;
-
-  return [
-    {
-      width: `${200 + bass * 150}%`,
-      height: `${200 + bass * 150}%`,
-      top: `${-80 + bassOffset}%`,
-      right: `${-80 - bassOffset}%`,
-      color: colors[0],
-      opacity: 0.4 + bass * 0.6,
-      scale: 1 + bass * 0.5,
-      rotation: bass * 45,
-      blur: 'blur-2xl',
-    },
-    {
-      width: `${180 + mid * 120}%`,
-      height: `${180 + mid * 120}%`,
-      bottom: `${-60 + midOffset}%`,
-      left: `${-60 - midOffset}%`,
-      color: colors[1] || colors[0],
-      opacity: 0.4 + mid * 0.6,
-      scale: 1 + mid * 0.4,
-      rotation: -mid * 40,
-      blur: 'blur-2xl',
-    },
-    {
-      width: `${140 + high * 100}%`,
-      height: `${140 + high * 100}%`,
-      top: `${70 - highOffset}%`,
-      right: `${-50 + highOffset}%`,
-      color: colors[2] || colors[0],
-      opacity: 0.35 + high * 0.65,
-      scale: 1 + high * 0.35,
-      rotation: high * 35,
-      blur: 'blur-xl',
-    },
-    {
-      width: `${160 + bass * 140}%`,
-      height: `${160 + bass * 140}%`,
-      top: `${-60 - bassOffset * 0.8}%`,
-      left: `${-60 + bassOffset * 0.8}%`,
-      color: colors[3] || colors[1] || colors[0],
-      opacity: 0.35 + bass * 0.65,
-      scale: 1 + bass * 0.55,
-      rotation: -bass * 50,
-      blur: 'blur-2xl',
-    },
-    {
-      width: `${80 + overall * 150}%`,
-      height: `${80 + overall * 150}%`,
-      top: '50%',
-      left: '50%',
-      color: colors[0],
-      opacity: 0.3 + overall * 0.5,
-      scale: 1 + overall * 0.4,
-      rotation: 0,
-      isCenter: true,
-      blur: 'blur-3xl',
-    },
-  ];
-}
-
-// =============================================================================
-// SPOTLIGHT
-// =============================================================================
-
-export function calculateSpotlight(
-  levels: AudioLevels,
-  config: EffectConfig,
-  colors: string[],
-  rotation: number
-): SpotlightData {
-  const { bass, mid, high, overall } = levels;
-
-  return {
-    rotation: rotation + mid * 180,
-    inset: 12 + bass * 30,
-    colors: colors.map((c, i) => ({
-      color: c,
-      opacity: i === 0 ? 0.3 + bass * 0.7 : i === 1 ? 0.3 + mid * 0.7 : 0.3 + high * 0.7,
-    })),
-    pulseInset: 24 + bass * 50,
-    pulseOpacity: 0.3 + bass * 0.7,
-    pulseScale: 1 + bass * 0.4,
-    ringOpacity: 0.2 + overall * 0.6,
-    ringScale: 1 + overall * 0.3,
-  };
-}
-```
-
----
-
-## `effects/animations.ts`
-
-CSS keyframes (~80 lines).
-
-```typescript
-/**
- * CSS keyframes for audio-reactive effects.
- * Injected once via <style> tag.
- */
-export const EFFECT_ANIMATIONS = `
-  @keyframes spotlight-spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-
-  @keyframes orb-float-1 {
-    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
-    50% { transform: translate(-50%, -50%) translateY(-15px); }
-  }
-
-  @keyframes orb-float-2 {
-    0%, 100% { transform: translate(-50%, -50%) translateX(0); }
-    50% { transform: translate(-50%, -50%) translateX(15px); }
-  }
-
-  @keyframes orb-float-3 {
-    0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
-    33% { transform: translate(-50%, -50%) translate(10px, -10px); }
-    66% { transform: translate(-50%, -50%) translate(-10px, 10px); }
-  }
-
-  @keyframes orb-float-4 {
-    0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
-    50% { transform: translate(-50%, -50%) translate(-15px, -10px); }
-  }
-
-  @keyframes mesh-float-1 {
-    0%, 100% { transform: translate(0, 0) scale(1); }
-    25% { transform: translate(-5%, 10%) scale(1.05); }
-    50% { transform: translate(5%, 5%) scale(0.95); }
-    75% { transform: translate(-3%, -5%) scale(1.02); }
-  }
-
-  @keyframes mesh-float-2 {
-    0%, 100% { transform: translate(0, 0) scale(1); }
-    33% { transform: translate(8%, -8%) scale(1.08); }
-    66% { transform: translate(-6%, 6%) scale(0.92); }
-  }
-
-  @keyframes mesh-float-3 {
-    0%, 100% { transform: translate(0, 0) scale(1); }
-    50% { transform: translate(10%, 10%) scale(1.1); }
-  }
-
-  @keyframes mesh-float-4 {
-    0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
-    25% { transform: translate(10%, -5%) scale(1.1) rotate(5deg); }
-    50% { transform: translate(-5%, 10%) scale(0.95) rotate(-5deg); }
-    75% { transform: translate(-10%, -10%) scale(1.05) rotate(3deg); }
-  }
-
-  @keyframes mesh-pulse {
-    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
-    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.5; }
-  }
-
-  @keyframes glow-breathe {
-    0%, 100% { opacity: 0.6; transform: scale(1); }
-    50% { opacity: 1; transform: scale(1.05); }
-  }
-
-  @keyframes glow-rotate {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-
-  @keyframes sparkle-move {
-    0% { opacity: 0; transform: scale(0.8); }
-    50% { opacity: 1; }
-    100% { opacity: 0; transform: scale(1.2); }
-  }
-`;
-```
-
----
-
-## `effects/index.ts`
-
-Re-export all.
-
-```typescript
-// Constants
-export {
-  INTENSITY_CONFIG,
-  COLOR_SCHEMES,
-  DEFAULT_GLOW_COLORS,
-  getEffectConfig,
-  getColors,
-} from './constants';
-
-// Calculations
-export {
-  prepareEffectColors,
-  calculateGlowLayers,
-  calculateOrbs,
-  calculateMeshGradients,
-  calculateSpotlight,
-} from './calculations';
-
-// Animations
-export { EFFECT_ANIMATIONS } from './animations';
-```