From 2f0a4f67de5af6686603cc0f7e4d2731ce11d6d1 Mon Sep 17 00:00:00 2001
From: Vitaly Koiro <yuutacn@gmail.com>
Date: Wed, 14 May 2025 19:23:53 +0300
Subject: [PATCH 1/3] refactor: JS DOC removed

---
 CHANGELOG.md                             |  8 ++
 package.json                             |  2 +-
 src/core/errors/PrismiumError.mjs        |  3 -
 src/core/managers/DOMManager.mjs         | 10 ---
 src/core/managers/EffectsManager.mjs     | 93 +++++++-----------------
 src/core/managers/IconManager.mjs        |  4 -
 src/core/managers/TimerManager.mjs       |  6 --
 "src/core/managers/\321\204"             | 59 ---------------
 src/core/methods/actions.mjs             |  2 +-
 src/modules/effects.mjs                  |  4 -
 src/react/components/Prismium.mjs        | 20 -----
 src/react/components/PrismiumContent.mjs |  6 --
 src/react/components/PrismiumCurrent.mjs |  6 --
 src/types/README.md                      | 18 -----
 src/utils/base.mjs                       | 18 ++---
 src/utils/deepMerge.mjs                  |  6 +-
 src/utils/is.mjs                         |  8 +-
 src/vue/components/Prismium.mjs          | 10 ---
 src/vue/components/PrismiumContent.mjs   | 10 ---
 src/vue/components/PrismiumCurrent.mjs   | 10 ---
 20 files changed, 51 insertions(+), 252 deletions(-)
 delete mode 100644 "src/core/managers/\321\204"

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8b3de8c..ef96f4c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,11 @@
+## 4.1.1 - Released on 2025-05-x
+
+### Reactor
+
+- JS DOC removed
+
+<br>
+
 ## 4.1.0 - Released on 2025-05-14
 
 It's done! I found time to finish this useful library!
diff --git a/package.json b/package.json
index b491211..29c0fcf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "prismium-src",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "A modern JavaScript accordion library with smooth animations. Easily integrates with React, Vue, and vanilla JavaScript.",
   "type": "module",
   "scripts": {
diff --git a/src/core/errors/PrismiumError.mjs b/src/core/errors/PrismiumError.mjs
index 46461e6..8301635 100644
--- a/src/core/errors/PrismiumError.mjs
+++ b/src/core/errors/PrismiumError.mjs
@@ -1,12 +1,9 @@
 /**
  * Class for handling Prismium errors
- * @extends Error
  */
 export class PrismiumError extends Error {
   /**
    * Creates a new Prismium error
-   * @param {string} message - Error message
-   * @param {Error} [originalError] - Original error that was caught
    */
   constructor(message, originalError) {
     super(message);
diff --git a/src/core/managers/DOMManager.mjs b/src/core/managers/DOMManager.mjs
index 917af48..523e3d4 100644
--- a/src/core/managers/DOMManager.mjs
+++ b/src/core/managers/DOMManager.mjs
@@ -7,9 +7,6 @@ import { PrismiumError } from '../errors/PrismiumError.mjs';
 export class DOMManager {
   /**
    * Set up the DOM manager with Prismium instance and element
-   * @param {import('../../types/core').default} instance - Prismium instance
-   * @param {HTMLElement} el - Root element
-   * @returns {DOMManager} The DOMManager instance
    */
   setup(instance, el) {
     this.validateElement(el);
@@ -23,8 +20,6 @@ export class DOMManager {
 
   /**
    * Validate that the element is valid for Prismium
-   * @param {Element} el - Element to validate
-   * @throws {PrismiumError} If the element is invalid
    */
   validateElement(el) {
     if (!el) {
@@ -42,8 +37,6 @@ export class DOMManager {
 
   /**
    * Create the accordion structure
-   * @param {HTMLElement} el - Root element
-   * @throws {Error} If required elements are not found
    */
   createStructure(el) {
     const content = el.querySelector(this.instance.options.contentSelector);
@@ -87,7 +80,6 @@ export class DOMManager {
 
   /**
    * Set CSS classes for elements
-   * @param {HTMLElement} el - Root element
    */
   setClasses(el) {
     el.classList.add('prismium');
@@ -98,7 +90,6 @@ export class DOMManager {
 
   /**
    * Apply theme classes to the element
-   * @param {HTMLElement} el - Root element
    */
   setTheme(el) {
     const { theme } = this.instance.options;
@@ -117,7 +108,6 @@ export class DOMManager {
 
   /**
    * Handle the initial state of the accordion
-   * @param {HTMLElement} el - Root element
    */
   handleInitialState(el) {
     if (
diff --git a/src/core/managers/EffectsManager.mjs b/src/core/managers/EffectsManager.mjs
index e61e911..49a8438 100644
--- a/src/core/managers/EffectsManager.mjs
+++ b/src/core/managers/EffectsManager.mjs
@@ -5,9 +5,6 @@
 export class EffectsManager {
   /**
    * Apply animation effect based on instance options
-   * @param {import('../../types/core').default} instance - Prismium instance
-   * @param {boolean} isOpening - Whether accordion is opening
-   * @private
    */
   #applyEffect(instance, isOpening) {
     if (!instance.$content) return;
@@ -30,7 +27,6 @@ export class EffectsManager {
 
   /**
    * Apply effects when opening the accordion
-   * @param {import('../../types/core').default} instance - Prismium instance
    */
   applyOpenEffects(instance) {
     this.#applyEffect(instance, true);
@@ -38,7 +34,6 @@ export class EffectsManager {
 
   /**
    * Apply effects when closing the accordion
-   * @param {import('../../types/core').default} instance - Prismium instance
    */
   applyCloseEffects(instance) {
     this.#applyEffect(instance, false);
@@ -46,9 +41,6 @@ export class EffectsManager {
 
   /**
    * Get filtered children elements for animation
-   * @param {import('../../types/core').default} instance - Prismium instance
-   * @returns {Element[]} Filtered child elements
-   * @private
    */
   #getFilteredChildren(instance) {
     let childrenSelectors, ignoreSelectors;
@@ -92,9 +84,6 @@ export class EffectsManager {
   /**
    * Apply line-by-line animation effect
    * Shows elements one by one with translation and opacity
-   * @param {import('../../types/core').default} instance - Prismium instance
-   * @param {boolean} isOpening - Whether accordion is opening
-   * @private
    */
   #applyLineByLineEffect(instance, isOpening) {
     const defaults = {
@@ -112,21 +101,21 @@ export class EffectsManager {
 
     if (!children.length) return;
 
-    // Обрабатываем options | Process options
+    // Process options
     if (typeof options.y === 'number') options.y = `${options.y}px`;
     if (typeof options.x === 'number') options.x = `${options.x}px`;
 
-    // Форсируем reflow | Force reflow
+    // Force reflow
     instance.$content.offsetHeight;
 
     if (isOpening) {
-      // Настраиваем начальное состояние | Setup initial state
+      // Setup initial state
       children.forEach((child) => {
         child.style.transform = `translate(${options.x}, ${options.y}) scale(${options.scale})`;
         child.style.opacity = options.opacity;
       });
 
-      // Запускаем анимацию с задержкой | Start animation with delay
+      // Start animation with delay
       requestAnimationFrame(() => {
         children.forEach((child, i) => {
           child.style.transition = `transform ${options.speed}ms ${options.easing}, 
@@ -137,7 +126,7 @@ export class EffectsManager {
         });
       });
     } else {
-      // Анимация закрытия | Closing animation
+      // Closing animation
       children.forEach((child, i) => {
         const reverseIndex = children.length - 1 - i;
         child.style.transition = `transform ${options.speed}ms ${options.easing}, 
@@ -148,14 +137,14 @@ export class EffectsManager {
       });
     }
 
-    // Очистка стилей после завершения | Cleanup styles after animation
+    // Cleanup styles after animation
     const maxDelay = options.delay * (children.length - 1) + options.speed;
 
-    // Очищаем предыдущий таймер если есть | Clear previous timer if exists
+    // Clear previous timer if exists
     instance.__cleanupTimer &&
       instance.timerManager.clearTimeout(instance.__cleanupTimer);
 
-    // Устанавливаем новый таймер | Set new timer
+    // Set new timer
     instance.__cleanupTimer = instance.timerManager.setTimeout(() => {
       children.forEach((child) => {
         child.style.transition = '';
@@ -170,9 +159,6 @@ export class EffectsManager {
   /**
    * Apply fade-scale animation effect
    * Fades and scales elements simultaneously
-   * @param {import('../../types/core').default} instance - Prismium instance
-   * @param {boolean} isOpening - Whether accordion is opening
-   * @private
    */
   #applyFadeScaleEffect(instance, isOpening) {
     const defaults = {
@@ -186,7 +172,7 @@ export class EffectsManager {
     const children = this.#getFilteredChildren(instance);
     if (!children.length) return;
 
-    // Сбрасываем стили перед анимацией | Reset styles before animation
+    // Reset styles before animation
     children.forEach((child) => {
       child.style.transition = 'none';
       child.style.transform = isOpening
@@ -195,7 +181,7 @@ export class EffectsManager {
       child.style.opacity = isOpening ? options.opacity : '1';
     });
 
-    // Форсируем reflow | Force reflow
+    // Force reflow
     instance.$content.offsetHeight;
 
     children.forEach((child) => {
@@ -219,9 +205,6 @@ export class EffectsManager {
   /**
    * Apply slide animation effect
    * Slides elements from a specified direction
-   * @param {import('../../types/core').default} instance - Prismium instance
-   * @param {boolean} isOpening - Whether accordion is opening
-   * @private
    */
   #applySlideEffect(instance, isOpening) {
     const defaults = {
@@ -236,11 +219,11 @@ export class EffectsManager {
     const children = this.#getFilteredChildren(instance);
     if (!children.length) return;
 
-    // Обрабатываем options | Process options
+    // Process options
     if (typeof options.distance === 'number')
       options.distance = `${options.distance}px`;
 
-    // Определяем трансформацию в зависимости от направления | Define transform based on direction
+    // Define transform based on direction
     const getTransform = (direction, distance) => {
       switch (direction) {
         case 'up':
@@ -256,7 +239,7 @@ export class EffectsManager {
       }
     };
 
-    // Сбрасываем стили перед анимацией | Reset styles before animation
+    // Reset styles before animation
     children.forEach((child) => {
       child.style.transition = 'none';
       child.style.transform = isOpening
@@ -265,7 +248,7 @@ export class EffectsManager {
       child.style.opacity = isOpening ? options.opacity : '1';
     });
 
-    // Форсируем reflow | Force reflow
+    // Force reflow
     instance.$content.offsetHeight;
 
     children.forEach((child) => {
@@ -292,9 +275,6 @@ export class EffectsManager {
   /**
    * Apply stagger animation effect
    * Animates elements from different directions
-   * @param {import('../../types/core').default} instance - Prismium instance
-   * @param {boolean} isOpening - Whether accordion is opening
-   * @private
    */
   #applyStaggerEffect(instance, isOpening) {
     const defaults = {
@@ -310,11 +290,11 @@ export class EffectsManager {
     const children = this.#getFilteredChildren(instance);
     if (!children.length) return;
 
-    // Обрабатываем options | Process options
+    // Process options
     if (typeof options.distance === 'number')
       options.distance = `${options.distance}px`;
 
-    // Сбрасываем стили перед анимацией | Reset styles before animation
+    // Reset styles before animation
     children.forEach((child, i) => {
       const direction = options.directions[i % options.directions.length];
       let transform;
@@ -339,7 +319,7 @@ export class EffectsManager {
       child.style.opacity = isOpening ? options.opacity : '1';
     });
 
-    // Форсируем reflow | Force reflow
+    // Force reflow
     instance.$content.offsetHeight;
 
     children.forEach((child, i) => {
@@ -382,9 +362,6 @@ export class EffectsManager {
   /**
    * Apply wave animation effect
    * Creates a wave-like animation pattern
-   * @param {import('../../types/core').default} instance - Prismium instance
-   * @param {boolean} isOpening - Whether accordion is opening
-   * @private
    */
   #applyWaveEffect(instance, isOpening) {
     const defaults = {
@@ -400,11 +377,11 @@ export class EffectsManager {
     const children = this.#getFilteredChildren(instance);
     if (!children.length) return;
 
-    // Обрабатываем options | Process options
+    // Process options
     if (typeof options.amplitude === 'number')
       options.amplitude = `${options.amplitude}px`;
 
-    // Сбрасываем стили перед анимацией | Reset styles before animation
+    // Reset styles before animation
     children.forEach((child, i) => {
       const phase = (i / children.length) * Math.PI * options.frequency;
       const y = Math.sin(phase) * parseInt(options.amplitude);
@@ -416,7 +393,7 @@ export class EffectsManager {
       child.style.opacity = isOpening ? options.opacity : '1';
     });
 
-    // Форсируем reflow | Force reflow
+    // Force reflow
     instance.$content.offsetHeight;
 
     children.forEach((child, i) => {
@@ -444,9 +421,6 @@ export class EffectsManager {
   /**
    * Apply flip animation effect
    * Flips elements in 3D space
-   * @param {import('../../types/core').default} instance - Prismium instance
-   * @param {boolean} isOpening - Whether accordion is opening
-   * @private
    */
   #applyFlipEffect(instance, isOpening) {
     const defaults = {
@@ -462,7 +436,7 @@ export class EffectsManager {
     const children = this.#getFilteredChildren(instance);
     if (!children.length) return;
 
-    // Обрабатываем options | Process options
+    // Process options
     if (typeof options.perspective === 'number')
       options.perspective = `${options.perspective}px`;
 
@@ -471,7 +445,7 @@ export class EffectsManager {
 
     instance.$content.style.perspective = options.perspective;
 
-    // Сбрасываем стили перед анимацией | Reset styles before animation
+    // Reset styles before animation
     children.forEach((child, i) => {
       child.style.transition = 'none';
       child.style.transform = isOpening
@@ -480,7 +454,7 @@ export class EffectsManager {
       child.style.opacity = isOpening ? options.opacity : '1';
     });
 
-    // Форсируем reflow | Force reflow
+    // Force reflow
     instance.$content.offsetHeight;
 
     children.forEach((child, i) => {
@@ -505,9 +479,6 @@ export class EffectsManager {
   /**
    * Apply zoom animation effect
    * Zooms elements from different origins
-   * @param {import('../../types/core').default} instance - Prismium instance
-   * @param {boolean} isOpening - Whether accordion is opening
-   * @private
    */
   #applyZoomEffect(instance, isOpening) {
     const defaults = {
@@ -560,9 +531,6 @@ export class EffectsManager {
   /**
    * Apply cascade animation effect
    * Creates a cascading animation with rotation
-   * @param {import('../../types/core').default} instance - Prismium instance
-   * @param {boolean} isOpening - Whether accordion is opening
-   * @private
    */
   #applyCascadeEffect(instance, isOpening) {
     const defaults = {
@@ -578,7 +546,7 @@ export class EffectsManager {
     const children = this.#getFilteredChildren(instance);
     if (!children.length) return;
 
-    // Обрабатываем options | Process options
+    // Process options
     if (typeof options.distance === 'number')
       options.distance = `${options.distance}px`;
 
@@ -613,9 +581,6 @@ export class EffectsManager {
   /**
    * Apply custom animation effect
    * Allows for custom user-defined animations
-   * @param {import('../../types/core').default} instance - Prismium instance
-   * @param {boolean} isOpening - Whether accordion is opening
-   * @private
    */
   #applyCustomEffect(instance, isOpening) {
     const defaults = {
@@ -643,17 +608,17 @@ export class EffectsManager {
 
     if (!children.length) return;
 
-    // Применяем начальную настройку если есть | Apply setup if exists
+    // Apply setup if exists
     if (typeof options.setup === 'function') {
       children.forEach((child, i) => {
         options.setup(instance, child, i, children.length, isOpening);
       });
     }
 
-    // Форсируем reflow | Force reflow
+    // Force reflow
     instance.$content.offsetHeight;
 
-    // Применяем анимацию | Apply animation
+    // Apply animation
     children.forEach((child, i) => {
       const animate = isOpening ? options.open : options.close;
       if (typeof animate === 'function') {
@@ -663,7 +628,7 @@ export class EffectsManager {
       }
     });
 
-    // Очистка после анимации | Cleanup after animation
+    // Cleanup after animation
     if (typeof options.cleanup === 'function') {
       const maxDelay = options.delay * (children.length - 1) + options.speed;
 
@@ -679,8 +644,6 @@ export class EffectsManager {
 
   /**
    * Calculate total animation duration for the current effect
-   * @param {import('../../types/core').default} instance - Prismium instance
-   * @returns {number} Total animation duration in milliseconds
    */
   getEffectsDuration(instance) {
     if (!instance.$content || !instance.options.effect) return 0;
diff --git a/src/core/managers/IconManager.mjs b/src/core/managers/IconManager.mjs
index 626d8cd..33ffd32 100644
--- a/src/core/managers/IconManager.mjs
+++ b/src/core/managers/IconManager.mjs
@@ -5,9 +5,6 @@
 export class IconManager {
   /**
    * Set up the Icon manager with Prismium instance and current element
-   * @param {import('../../types/core').default} instance - Prismium instance
-   * @param {HTMLElement} $current - Current element where icon is placed
-   * @returns {IconManager} The IconManager instance
    */
   setup(instance, $current) {
     this.instance = instance;
@@ -24,7 +21,6 @@ export class IconManager {
 
   /**
    * Update icon based on accordion state
-   * @param {'open'|'close'} state - Current accordion state
    */
   updateIcon(state) {
     if (!this.$icons || !this.icon) return;
diff --git a/src/core/managers/TimerManager.mjs b/src/core/managers/TimerManager.mjs
index fbcb16e..4794653 100644
--- a/src/core/managers/TimerManager.mjs
+++ b/src/core/managers/TimerManager.mjs
@@ -12,16 +12,11 @@ export class TimerManager {
 
   /**
    * Set of active timers
-   * @type {Set<number>}
-   * @private
    */
   #timers;
 
   /**
    * Set timeout for a function
-   * @param {Function} callback - Function to call
-   * @param {number} delay - Delay in milliseconds
-   * @returns {number} Timeout ID
    */
   setTimeout(callback, delay) {
     const timer = setTimeout(() => {
@@ -35,7 +30,6 @@ export class TimerManager {
 
   /**
    * Clear a timeout
-   * @param {number} timer - Timeout ID
    */
   clearTimeout(timer) {
     if (timer) {
diff --git "a/src/core/managers/\321\204" "b/src/core/managers/\321\204"
deleted file mode 100644
index f4df4a1..0000000
--- "a/src/core/managers/\321\204"
+++ /dev/null
@@ -1,59 +0,0 @@
-document.addEventListener('DOMContentLoaded', () => {
-    const contentElement = document.getElementById('content');
-
-    // Создадим псевдо-объект instance с опциями для кастомного эффекта
-    const instance = {
-        // Опции, передаваемые в кастомный эффект
-        options: {
-            effectCustom: {
-                speed: 300, // продолжительность анимации в мс
-                delay: 100, // задержка между анимациями элементов
-                setup: (child: HTMLElement, index: number, total: number, isOpening: boolean) => {
-                    // Начальная настройка: например, скрыть элемент
-                    child.style.opacity = '0';
-                    console.log(`Setup ${index + 1}/${total} перед ${isOpening ? 'открытием' : 'закрытием'}`);
-                },
-                open: (child: HTMLElement, index: number, total: number) => {
-                    // Анимация открытия: плавное появление
-                    child.style.transition = 'opacity 0.3s';
-                    child.style.opacity = '1';
-                    console.log(`Элемент ${index + 1}/${total} открывается`);
-                },
-                close: (child: HTMLElement, index: number, total: number) => {
-                    // Анимация закрытия: плавное исчезновение
-                    child.style.transition = 'opacity 0.3s';
-                    child.style.opacity = '0';
-                    console.log(`Элемент ${index + 1}/${total} закрывается`);
-                },
-                cleanup: (child: HTMLElement, index: number, total: number, isOpening: boolean) => {
-                    // Очистка: удаление временных стилей
-                    child.style.transition = '';
-                    console.log(`Очистка ${index + 1}/${total} после ${isOpening ? 'открытия' : 'закрытия'}`);
-                },
-            }
-        },
-        // Элемент, к которому прикрепляются дочерние элементы
-        $content: contentElement!,
-        // Простой менеджер таймеров, использующий глобальные функции
-        timerManager: {
-            setTimeout,
-            clearTimeout
-        }
-    };
-
-    // Допустим, контейнер содержит несколько <div> для применения эффекта.
-    // Пример разметки HTML:
-    // <div id="content">
-    //   <div>Первый элемент</div>
-    //   <div>Второй элемент</div>
-    //   <div>Третий элемент</div>
-    // </div>
-    // Пусть метод #getFilteredChildren ищет дочерние элементы внутри $content
-
-    // Создаём экземпляр EffectsManager
-    const effectsManager = new EffectsManager();
-
-    // Допустим, EffectsManager имеет публичный метод applyEffect, который внутри вызывает #applyCustomEffect.
-    // Передаём instance и флаг (true - для открытия, false - для закрытия)
-    effectsManager.applyEffect(instance, true);
-});
diff --git a/src/core/methods/actions.mjs b/src/core/methods/actions.mjs
index b7934a8..8cf27c9 100644
--- a/src/core/methods/actions.mjs
+++ b/src/core/methods/actions.mjs
@@ -154,7 +154,7 @@ export default {
 
     instance.emit('beforeClose');
 
-    // Установка скорости | Set the speed
+    // Set the speed
     instance.el.style.setProperty('--pr-speed', `${instance.speed.close}ms`);
 
     // If there is an effects manager and an effect is set, start the effect event
diff --git a/src/modules/effects.mjs b/src/modules/effects.mjs
index 0ec1b84..2b01b81 100644
--- a/src/modules/effects.mjs
+++ b/src/modules/effects.mjs
@@ -4,7 +4,6 @@ import { EffectsManager } from '../core/managers/EffectsManager.mjs';
 /**
  * Effects module for Prismium
  * Adds animation effects to accordion content
- * @type {import('../types/index').PrismiumModule}
  */
 export default {
   /**
@@ -18,20 +17,17 @@ export default {
   defaultOptions: {
     /**
      * Effect type to use
-     * @type {import('../types/index').PrismiumEffect|null}
      */
     effect: null,
 
     /**
      * Selectors for elements to ignore when applying effects
-     * @type {string[]}
      */
     effectIgnore: ['[data-effect-ignore]'],
   },
 
   /**
    * Install the effects module
-   * @param {import('../types/core').default} instance - Prismium instance
    */
   install(instance) {
     deepMerge({}, this.defaultOptions, instance.options);
diff --git a/src/react/components/Prismium.mjs b/src/react/components/Prismium.mjs
index 9e3bd51..d9e4cc0 100644
--- a/src/react/components/Prismium.mjs
+++ b/src/react/components/Prismium.mjs
@@ -5,26 +5,6 @@ import PrismiumCore from '../../core/core.mjs';
 /**
  * Main Prismium React component
  * Provides an accordion UI component with animation effects
- *
- * @param {Object} props - Component props
- * @param {import('../../types/options').PrismiumOptions} [props.options={}] - Configuration options for Prismium
- * @param {import('../../types/index').PrismiumModule[]} [props.modules=[]] - Array of modules to use with Prismium
- * @param {React.ReactNode} props.children - Child components
- * @param {Function} [props.beforeInit] - Event handler for beforeInit event
- * @param {Function} [props.init] - Event handler for init event
- * @param {Function} [props.afterInit] - Event handler for afterInit event
- * @param {Function} [props.beforeOpen] - Event handler for beforeOpen event
- * @param {Function} [props.open] - Event handler for open event
- * @param {Function} [props.afterOpen] - Event handler for afterOpen event
- * @param {Function} [props.beforeClose] - Event handler for beforeClose event
- * @param {Function} [props.close] - Event handler for close event
- * @param {Function} [props.afterClose] - Event handler for afterClose event
- * @param {Function} [props.beforeDestroy] - Event handler for beforeDestroy event
- * @param {Function} [props.destroy] - Event handler for destroy event
- * @param {Function} [props.afterDestroy] - Event handler for afterDestroy event
- * @param {Function} [props.effectStart] - Event handler for effectStart event
- * @param {Function} [props.effectEnd] - Event handler for effectEnd event
- * @returns {React.ReactElement} Prismium component
  */
 export const Prismium = ({
   options = {},
diff --git a/src/react/components/PrismiumContent.mjs b/src/react/components/PrismiumContent.mjs
index b19f4f4..ae7a48b 100644
--- a/src/react/components/PrismiumContent.mjs
+++ b/src/react/components/PrismiumContent.mjs
@@ -3,12 +3,6 @@ import React from 'react';
 /**
  * Prismium Content component for React
  * Represents the collapsible content part of an accordion
- *
- * @param {Object} props - Component props
- * @param {string} [props.selector='div'] - HTML tag to use for rendering
- * @param {Object} [props.attributes={}] - Additional attributes to apply to the element
- * @param {React.ReactNode} props.children - Child components
- * @returns {React.ReactElement} PrismiumContent component
  */
 export const PrismiumContent = ({
   selector = 'div',
diff --git a/src/react/components/PrismiumCurrent.mjs b/src/react/components/PrismiumCurrent.mjs
index 6eb7f3b..495a1e3 100644
--- a/src/react/components/PrismiumCurrent.mjs
+++ b/src/react/components/PrismiumCurrent.mjs
@@ -3,12 +3,6 @@ import React from 'react';
 /**
  * Prismium Current component for React
  * Represents the clickable header part of an accordion
- *
- * @param {Object} props - Component props
- * @param {string} [props.selector='div'] - HTML tag to use for rendering
- * @param {Object} [props.attributes={}] - Additional attributes to apply to the element
- * @param {React.ReactNode} props.children - Child components
- * @returns {React.ReactElement} PrismiumCurrent component
  */
 export const PrismiumCurrent = ({
   selector = 'div',
diff --git a/src/types/README.md b/src/types/README.md
index 7e80a02..cb24dfa 100644
--- a/src/types/README.md
+++ b/src/types/README.md
@@ -29,24 +29,6 @@ const prismiumOptions: PrismiumOptions = {
 const accordion = new Prismium('.accordion', prismiumOptions);
 ```
 
-## Using with JavaScript + JSDoc
-
-```javascript
-/**
- * @typedef {import('prismium').PrismiumOptions} PrismiumOptions
- */
-
-/**
- * @type {PrismiumOptions}
- */
-const prismiumOptions = {
-  theme: 'dark',
-  effect: 'line-by-line',
-};
-
-const accordion = new Prismium('.accordion', prismiumOptions);
-```
-
 ## React Components
 
 ```tsx
diff --git a/src/utils/base.mjs b/src/utils/base.mjs
index 52be6a0..0350168 100644
--- a/src/utils/base.mjs
+++ b/src/utils/base.mjs
@@ -1,30 +1,30 @@
-// Получить текущее время | Get current time
+// Get current time
 function now() {
   return Date.now();
 }
 
-// Обработка аккордеонов | Process accordions
+// Process accordions
 function processAccordions(
   nestedAccordions,
   rootAccordions,
   getInstance,
   open
 ) {
-  // Открываем вложенные мгновенно | Open nested accordions instantly
+  // Open nested accordions instantly
   nestedAccordions.forEach((el) => {
     const instance = getInstance(el);
     if (instance) {
-      // Сохраняем оригинальную скорость | Save original speed
+      // Save original speed
       const originalSpeed = { ...instance.speed };
 
-      // Устанавливаем нулевую скорость | Set zero speed
+      // Set zero speed
       el.style.setProperty('--pr-speed', '0ms');
 
-      // Открываем аккордеон | Open accordion
+      // Open accordion
       open(el, false);
       instance.iconManager?.updateIcon('open');
 
-      // Сразу восстанавливаем скорость | Restore speed immediately
+      // Restore speed immediately
       requestAnimationFrame(() => {
         instance.speed = originalSpeed;
         el.style.setProperty('--pr-speed', `${originalSpeed.open}ms`);
@@ -32,7 +32,7 @@ function processAccordions(
     }
   });
 
-  // Открываем корневые с анимацией | Open root accordions with animation
+  // Open root accordions with animation
   rootAccordions.forEach((el) => {
     const instance = getInstance(el);
     if (instance) {
@@ -42,7 +42,7 @@ function processAccordions(
   });
 }
 
-// Получить глубину элемента | Get element depth
+// Get element depth
 function getElementDepth(el, container) {
   let depth = 0;
   let current = el;
diff --git a/src/utils/deepMerge.mjs b/src/utils/deepMerge.mjs
index 272047a..11cb626 100644
--- a/src/utils/deepMerge.mjs
+++ b/src/utils/deepMerge.mjs
@@ -1,9 +1,7 @@
 import { isNode, isObject } from './is.mjs';
 
 /**
- * @description Deep merge objects
- * @param {...object} sources - Objects to merge
- * @returns {object} Merged object
+ * Deep merge objects
  */
 export function deepMerge(...sources) {
   const [target, ...rest] = sources;
@@ -26,7 +24,7 @@ export function deepMerge(...sources) {
       const targetValue = target[key];
 
       if (isObject(sourceValue)) {
-        // Обработка объектов | Handle objects
+        // Handle objects
         if (sourceValue.__prismium__) {
           target[key] = sourceValue;
         } else if (isObject(targetValue)) {
diff --git a/src/utils/is.mjs b/src/utils/is.mjs
index 7b8a066..72ad621 100644
--- a/src/utils/is.mjs
+++ b/src/utils/is.mjs
@@ -1,7 +1,5 @@
 /**
- * @description Check if value is an object
- * @param {object} obj - Value to check
- * @returns {boolean} True if value is an object, false otherwise
+ * Check if value is an object
  */
 function isObject(obj) {
   return (
@@ -13,9 +11,7 @@ function isObject(obj) {
 }
 
 /**
- * @description Check if value is a DOM node
- * @param {Node} node - Value to check
- * @returns {boolean} True if value is a DOM node, false otherwise
+ * Check if value is a DOM node
  */
 function isNode(node) {
   return typeof window !== 'undefined' &&
diff --git a/src/vue/components/Prismium.mjs b/src/vue/components/Prismium.mjs
index f0e68cd..c9fafbc 100644
--- a/src/vue/components/Prismium.mjs
+++ b/src/vue/components/Prismium.mjs
@@ -13,7 +13,6 @@ import PrismiumCore from '../../core/core.mjs';
 
 /**
  * Injection key for Prismium context
- * @type {string}
  */
 export const PRISMIUM_INJECTION_KEY = 'prismium';
 
@@ -43,7 +42,6 @@ export const Prismium = defineComponent({
   props: {
     /**
      * Configuration options for Prismium
-     * @type {import('../../types/options').PrismiumOptions}
      */
     options: {
       type: Object,
@@ -52,7 +50,6 @@ export const Prismium = defineComponent({
 
     /**
      * Array of modules to use with Prismium
-     * @type {import('../../types/index').PrismiumModule[]}
      */
     modules: {
       type: Array,
@@ -61,7 +58,6 @@ export const Prismium = defineComponent({
 
     /**
      * Additional attributes to apply to the root element
-     * @type {Object}
      */
     attributes: {
       type: Object,
@@ -71,12 +67,6 @@ export const Prismium = defineComponent({
 
   /**
    * Component setup function
-   * @param {Object} props - Component props
-   * @param {Object} context - Setup context
-   * @param {Function} context.emit - Emit event function
-   * @param {Object} context.attrs - Non-prop attributes
-   * @param {Object} context.slots - Component slots
-   * @returns {Function} Render function
    */
   setup(props, { slots, emit, attrs }) {
     const prismiumRef = ref(null);
diff --git a/src/vue/components/PrismiumContent.mjs b/src/vue/components/PrismiumContent.mjs
index e6293db..79822e4 100644
--- a/src/vue/components/PrismiumContent.mjs
+++ b/src/vue/components/PrismiumContent.mjs
@@ -9,8 +9,6 @@ export const PrismiumContent = defineComponent({
   props: {
     /**
      * HTML tag/selector to use for rendering the component
-     * @type {string}
-     * @default 'div'
      */
     selector: {
       type: String,
@@ -19,7 +17,6 @@ export const PrismiumContent = defineComponent({
 
     /**
      * Additional attributes to apply to the element
-     * @type {Object}
      */
     attributes: {
       type: Object,
@@ -29,13 +26,6 @@ export const PrismiumContent = defineComponent({
 
   /**
    * Component setup function
-   * @param {Object} props - Component props
-   * @param {string} props.selector - HTML tag to render
-   * @param {Object} props.attributes - Additional attributes
-   * @param {Object} context - Setup context
-   * @param {Object} context.slots - Component slots
-   * @param {Object} context.attrs - Non-prop attributes
-   * @returns {Function} Render function
    */
   setup(props, { slots, attrs }) {
     return () =>
diff --git a/src/vue/components/PrismiumCurrent.mjs b/src/vue/components/PrismiumCurrent.mjs
index d039a7c..da13814 100644
--- a/src/vue/components/PrismiumCurrent.mjs
+++ b/src/vue/components/PrismiumCurrent.mjs
@@ -9,8 +9,6 @@ export const PrismiumCurrent = defineComponent({
   props: {
     /**
      * HTML tag/selector to use for rendering the component
-     * @type {string}
-     * @default 'div'
      */
     selector: {
       type: String,
@@ -19,7 +17,6 @@ export const PrismiumCurrent = defineComponent({
 
     /**
      * Additional attributes to apply to the element
-     * @type {Object}
      */
     attributes: {
       type: Object,
@@ -29,13 +26,6 @@ export const PrismiumCurrent = defineComponent({
 
   /**
    * Component setup function
-   * @param {Object} props - Component props
-   * @param {string} props.selector - HTML tag to render
-   * @param {Object} props.attributes - Additional attributes
-   * @param {Object} context - Setup context
-   * @param {Object} context.slots - Component slots
-   * @param {Object} context.attrs - Non-prop attributes
-   * @returns {Function} Render function
    */
   setup(props, { slots, attrs }) {
     return () =>

From 51327bfe50b80fc433bea21b655751570603a26c Mon Sep 17 00:00:00 2001
From: Vitaly Koiro <yuutacn@gmail.com>
Date: Wed, 14 May 2025 20:42:24 +0300
Subject: [PATCH 2/3] refactor: themes

---
 src/prismium.scss | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/prismium.scss b/src/prismium.scss
index f03429a..e276677 100644
--- a/src/prismium.scss
+++ b/src/prismium.scss
@@ -39,9 +39,6 @@
   align-items: flex-start;
   justify-content: flex-start;
 
-  color: var(--pr-current-color);
-  font: var(--pr-current-font);
-
   background-color: var(--pr-bg);
   border: solid var(--pr-border-width) var(--pr-border-color);
   border-radius: var(--pr-border-radius);
@@ -70,8 +67,8 @@
     justify-content: space-between;
     gap: var(--pr-current-gap);
 
-    color: inherit;
-    font: inherit;
+    color: var(--pr-current-color);
+    font: var(--pr-current-font);
     text-align: start;
 
     background-color: transparent;

From 72bdafe26d6c222a6571358b29b37afd158e3264 Mon Sep 17 00:00:00 2001
From: Vitaly Koiro <yuutacn@gmail.com>
Date: Wed, 14 May 2025 20:42:56 +0300
Subject: [PATCH 3/3] refactor: themes

---
 CHANGELOG.md                  |  7 ++++++-
 src/prismium.scss             | 14 +++++++++----
 src/themes/dark-contrast.scss |  1 -
 src/themes/dark.scss          | 22 ++++++++++----------
 src/themes/forest.scss        | 24 +++++++++++-----------
 src/themes/light.scss         | 24 +++++++++++-----------
 src/themes/ocean.scss         | 28 +++++++++++++-------------
 src/themes/sunset.scss        | 38 +++++++++++++++++------------------
 8 files changed, 84 insertions(+), 74 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ef96f4c..723a8a0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,8 +1,13 @@
-## 4.1.1 - Released on 2025-05-x
+## 4.1.1 - Released on 2025-05-14
 
 ### Reactor
 
 - JS DOC removed
+- Themes refactored
+
+### Fixes
+
+- Fixed the effect of CSS variable `--pr-current-font` on content
 
 <br>
 
diff --git a/src/prismium.scss b/src/prismium.scss
index e276677..4590c39 100644
--- a/src/prismium.scss
+++ b/src/prismium.scss
@@ -11,8 +11,9 @@
   --pr-anim-ease: cubic-bezier(0.36, 0.3, 0, 1);
   --pr-bg: transparent;
   --pr-bg-active: transparent;
-  --pr-bg-active-nested: transparent;
   --pr-bg-hover: transparent;
+  --pr-bg-nested: transparent;
+  --pr-bg-nested-active: transparent;
   --pr-border-color: transparent;
   --pr-border-radius: 0;
   --pr-border-width: 0;
@@ -99,7 +100,8 @@
 
     fill: var(--pr-icon-color);
 
-    transition: transform var(--pr-speed) var(--pr-anim-ease),
+    transition: transform var(--pr-speed, var(--pr-anim-duration))
+        var(--pr-anim-ease),
       fill var(--pr-anim-duration) var(--pr-anim-ease);
 
     pointer-events: all;
@@ -181,12 +183,16 @@
 
     .prismium {
       margin-top: var(--pr-gap);
+
+      background-color: var(--pr-bg-nested);
     }
   }
 
   &.prismium-active {
+    background-color: var(--pr-bg-active);
+
     > .prismium__current {
-      > .prismium__icon {
+      .prismium__icon {
         transform: rotate(180deg);
       }
     }
@@ -198,7 +204,7 @@
     }
 
     .prismium-active {
-      background-color: var(--pr-bg-active-nested);
+      background-color: var(--pr-bg-nested-active);
     }
   }
 
diff --git a/src/themes/dark-contrast.scss b/src/themes/dark-contrast.scss
index de71be8..bb05482 100644
--- a/src/themes/dark-contrast.scss
+++ b/src/themes/dark-contrast.scss
@@ -1,5 +1,4 @@
 .prismium.prismium_dark-contrast {
-  --pr-anim-duration: 0.35s;
   --pr-bg: #000;
   --pr-bg-active: #0f0f0f;
   --pr-bg-hover: #1d1d1d;
diff --git a/src/themes/dark.scss b/src/themes/dark.scss
index 5180792..d80c503 100644
--- a/src/themes/dark.scss
+++ b/src/themes/dark.scss
@@ -1,22 +1,22 @@
 .prismium.prismium_dark {
-  --pr-bg-active: #0f0f0f;
-  --pr-bg-active-nested: #FFF05;
-  --pr-bg-hover: #0e0e0e;
-  --pr-bg: #2b2b2b;
+  --pr-bg: #1c1c1c;
+  --pr-bg-active: var(--pr-bg);
+  --pr-bg-hover: #222222;
+  --pr-bg-nested: var(--pr-bg);
+  --pr-bg-nested-active: #ffffff05;
   --pr-border-color: #3a3a3a;
-  --pr-border-radius: 12px;
+  --pr-border-radius: 16px;
   --pr-border-width: 1px;
+  --pr-content-color: #f1f1f1;
+  --pr-content-font: 400 16px / 1.2 sans-serif;
   --pr-content-gap: 20px;
   --pr-content-offset: 20px;
+  --pr-current-color: #fafafa;
+  --pr-current-font: 500 20px / 1.2 sans-serif;
   --pr-current-gap: 20px;
-  --pr-anim-duration: 0.35s;
-  --pr-current-font: 500 20px/1.2 sans-serif;
-  --pr-content-font: 500 16px/1.2 sans-serif;
   --pr-gap: 10px;
-  --pr-icon-color-hover: #56e6de;
   --pr-icon-color: var(--pr-current-color);
+  --pr-icon-color-hover: #56e6de;
   --pr-icon-size: 24px;
   --pr-padding: 12px;
-  --pr-current-color: #dfdfdf;
-  --pr-content-color: #b3b3b3;
 }
diff --git a/src/themes/forest.scss b/src/themes/forest.scss
index 4561a7a..8375076 100644
--- a/src/themes/forest.scss
+++ b/src/themes/forest.scss
@@ -1,22 +1,22 @@
 .prismium.prismium_forest {
-  --pr-bg-active: #d8eecc;
-  --pr-bg-active-nested: #61ff051c;
-  --pr-bg-hover: #e8f0e8;
-  --pr-bg: #f5faf5;
-  --pr-border-color: #7a917a;
-  --pr-border-radius: 2px;
+  --pr-bg: #f5f5dc;
+  --pr-bg-active: var(--pr-bg);
+  --pr-bg-hover: #eaeac5;
+  --pr-bg-nested: var(--pr-bg);
+  --pr-bg-nested-active: #d8d8a899;
+  --pr-border-color: #c0c090;
+  --pr-border-radius: 4px;
   --pr-border-width: 1px;
+  --pr-content-color: #191b0c;
+  --pr-content-font: 500 16px / 1.2 sans-serif;
   --pr-content-gap: 20px;
   --pr-content-offset: 20px;
+  --pr-current-color: #191b0c;
+  --pr-current-font: 500 20px / 1.2 sans-serif;
   --pr-current-gap: 20px;
-  --pr-anim-duration: 0.35s;
-  --pr-current-font: 500 20px/1.2 sans-serif;
-  --pr-content-font: 500 16px/1.2 sans-serif;
   --pr-gap: 10px;
-  --pr-icon-color-hover: #1b4d29;
   --pr-icon-color: var(--pr-current-color);
+  --pr-icon-color-hover: #8fbc8f;
   --pr-icon-size: 24px;
   --pr-padding: 12px;
-  --pr-current-color: #1a291e;
-  --pr-content-color: #415445;
 }
diff --git a/src/themes/light.scss b/src/themes/light.scss
index b26f6b5..e2f0216 100644
--- a/src/themes/light.scss
+++ b/src/themes/light.scss
@@ -1,22 +1,22 @@
 .prismium.prismium_light {
-  --pr-bg-active: #f7fdfd;
-  --pr-bg-active-nested: #8efdff13;
-  --pr-bg-hover: #dfffff;
-  --pr-bg: #fcffff;
-  --pr-border-color: #c5c5c5;
-  --pr-border-radius: 12px;
+  --pr-bg: #ffffff;
+  --pr-bg-active: var(--pr-bg);
+  --pr-bg-hover: #f0f0f0;
+  --pr-bg-nested: var(--pr-bg);
+  --pr-bg-nested-active: #e0e0e099;
+  --pr-border-color: #d0d0d0;
+  --pr-border-radius: 20px;
   --pr-border-width: 1px;
+  --pr-content-color: #1f1f1f;
+  --pr-content-font: 500 16px / 1.2 sans-serif;
   --pr-content-gap: 20px;
   --pr-content-offset: 20px;
+  --pr-current-color: #1f1f1f;
+  --pr-current-font: 500 20px / 1.2 sans-serif;
   --pr-current-gap: 20px;
-  --pr-anim-duration: 0.35s;
-  --pr-current-font: 500 20px/1.2 sans-serif;
-  --pr-content-font: 500 16px/1.2 sans-serif;
   --pr-gap: 10px;
-  --pr-icon-color-hover: #3234b4;
   --pr-icon-color: var(--pr-current-color);
+  --pr-icon-color-hover: #56e6de;
   --pr-icon-size: 24px;
   --pr-padding: 12px;
-  --pr-current-color: #202020;
-  --pr-content-color: #4c4c4c;
 }
diff --git a/src/themes/ocean.scss b/src/themes/ocean.scss
index 3d7ef78..a0fd311 100644
--- a/src/themes/ocean.scss
+++ b/src/themes/ocean.scss
@@ -1,22 +1,22 @@
 .prismium.prismium_ocean {
-  --pr-bg-active: #cce4ee;
-  --pr-bg-active-nested: #05a6ff1c;
-  --pr-bg-hover: #e8edf0;
-  --pr-bg: #f5f8fa;
-  --pr-border-color: #7a8891;
-  --pr-border-radius: 24px;
+  --pr-bg: #f0fbff;
+  --pr-bg-active: #d9f4fc;
+  --pr-bg-hover: #c2ecfa;
+  --pr-bg-nested: var(--pr-bg);
+  --pr-bg-nested-active: #cdfafa62;
+  --pr-border-color: #8a8a8a69;
+  --pr-border-radius: 22px;
   --pr-border-width: 1px;
+  --pr-content-color: #000000;
+  --pr-content-font: 500 16px / 1.2 sans-serif;
   --pr-content-gap: 20px;
   --pr-content-offset: 20px;
+  --pr-current-color: #000000;
+  --pr-current-font: 500 20px / 1.2 sans-serif;
   --pr-current-gap: 20px;
-  --pr-anim-duration: 0.35s;
-  --pr-current-font: 500 20px/1.2 sans-serif;
-  --pr-content-font: 500 16px/1.2 sans-serif;
   --pr-gap: 10px;
-  --pr-icon-color-hover: #1b374d;
-  --pr-icon-color: var(--pr-current-color);
+  --pr-icon-color: #000000;
+  --pr-icon-color-hover: #0e3644;
   --pr-icon-size: 24px;
-  --pr-padding: 16px;
-  --pr-current-color: #1a2229;
-  --pr-content-color: #414954;
+  --pr-padding: 12px;
 }
diff --git a/src/themes/sunset.scss b/src/themes/sunset.scss
index 9871d7b..254997c 100644
--- a/src/themes/sunset.scss
+++ b/src/themes/sunset.scss
@@ -1,22 +1,22 @@
 .prismium.prismium_sunset {
-  --pr-bg-active: #ffe6cc;
-  --pr-bg-active-nested: #ffab4b11;
-  --pr-bg-hover: #fff0e8;
-  --pr-bg: #fff7f5;
-  --pr-border-color: #916f7a;
-  --pr-border-radius: 16px;
+  --pr-bg: #fdf6e3;
+  --pr-bg-active: #f5e8c7;
+  --pr-bg-hover: #f0e4bf;
+  --pr-bg-nested: var(--pr-bg);
+  --pr-bg-nested-active: #fae9bd70;
+  --pr-border-color: #d3c4a1;
+  --pr-border-radius: 12px;
   --pr-border-width: 1px;
-  --pr-content-gap: 20px;
-  --pr-content-offset: 20px;
-  --pr-current-gap: 20px;
-  --pr-anim-duration: 0.35s;
-  --pr-current-font: 500 20px/1.2 sans-serif;
-  --pr-content-font: 500 16px/1.2 sans-serif;
-  --pr-gap: 10px;
-  --pr-icon-color-hover: #963b1b;
-  --pr-icon-color: var(--pr-current-color);
-  --pr-icon-size: 24px;
-  --pr-padding: 12px;
-  --pr-current-color: #291f1a;
-  --pr-content-color: #544137;
+  --pr-content-color: #5b4636;
+  --pr-content-font: 500 16px / 1.5 'Georgia', serif;
+  --pr-content-gap: 16px;
+  --pr-content-offset: 16px;
+  --pr-current-color: #5b4636;
+  --pr-current-font: 600 18px / 1.5 'Georgia', serif;
+  --pr-current-gap: 16px;
+  --pr-gap: 8px;
+  --pr-icon-color: #5b4636;
+  --pr-icon-color-hover: #4e4835;
+  --pr-icon-size: 20px;
+  --pr-padding: 10px;
 }