fix: resolve panel collapse animation and import errors

- Fix chevron button positioning to move with collapsed panel edge
- Replace broken dynamic imports with static imports in ensureHtmlCleaningRegex
- Add smooth bidirectional expand/collapse animations
- Implement positioning-based layout for smooth transitions
- Add content opacity fade synchronized with panel width changes

This fixes the chevron button remaining stationary during collapse,
eliminates "Failed to fetch dynamically imported module" errors,
and provides smooth animations in both expand and collapse directions.

index.js

@@ -1,4 +1,4 @@
-import { getContext, renderExtensionTemplateAsync } from '../../../extensions.js';
+import { getContext, renderExtensionTemplateAsync, extension_settings as st_extension_settings } from '../../../extensions.js';
 import { eventSource, event_types, substituteParams, chat, generateRaw, saveSettingsDebounced, chat_metadata, saveChatDebounced, user_avatar, getThumbnailUrl, characters, this_chid, extension_prompt_types, extension_prompt_roles, setExtensionPrompt, reloadCurrentChat } from '../../../../script.js';
 import { selected_group, getGroupMembers } from '../../../group-chats.js';
 import { power_user } from '../../../power-user.js';
@@ -3435,12 +3435,9 @@ function onMessageSwiped(messageIndex) {
  */
 async function ensureHtmlCleaningRegex() {
     try {
-        // Import the regex engine to check existing scripts
-        const { getRegexScripts } = await import('../../regex/engine.js');
-        const existingScripts = getRegexScripts();
-
         // Check if the HTML cleaning regex already exists
         const scriptName = 'Clean HTML (From Outgoing Prompt)';
+        const existingScripts = st_extension_settings?.regex || [];
         const alreadyExists = existingScripts.some(script => script.scriptName === scriptName);
 
         if (alreadyExists) {
@@ -3448,9 +3445,6 @@ async function ensureHtmlCleaningRegex() {
             return;
         }
 
-        // Import the regex index to use the import function
-        const regexModule = await import('../../regex/index.js');
-
         // Create the regex script object based on the attached file
         const regexScript = {
             scriptName: scriptName,
@@ -3467,10 +3461,6 @@ async function ensureHtmlCleaningRegex() {
             maxDepth: null
         };
 
-        // Import using the onRegexImportObjectChange function
-        // We need to access it through the window object or by importing it
-        const { extension_settings } = await import('../../../scripts/extensions.js');
-
         // Generate a UUID for the script
         const uuidv4 = () => {
             return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
@@ -3483,15 +3473,14 @@ async function ensureHtmlCleaningRegex() {
         regexScript.id = uuidv4();
 
         // Add to global regex scripts
-        if (!Array.isArray(extension_settings.regex)) {
+        if (!Array.isArray(st_extension_settings.regex)) {
-            extension_settings.regex = [];
+            st_extension_settings.regex = [];
         }
 
-        extension_settings.regex.push(regexScript);
+        st_extension_settings.regex.push(regexScript);
 
-        // Import saveSettingsDebounced to save the changes
+        // Save the changes using the already-imported function
-        const { saveSettingsDebounced: saveExtensionSettings } = await import('../../../../script.js');
+        saveSettingsDebounced();
-        saveExtensionSettings();
 
         console.log('[RPG Companion] ✅ HTML cleaning regex imported successfully');
     } catch (error) {

style.css

@@ -38,15 +38,26 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     display: flex;
     flex-direction: column;
     overflow: visible;
-    transition: width 0.3s ease, transform 0.3s ease;
+    transition: width 0.3s ease, left 0.3s ease, right 0.3s ease, transform 0.3s ease;
 }
 
 /* Collapsed state */
 .rpg-panel.rpg-collapsed {
-    width: 40px !important;
+    max-width: 40px !important;
     min-width: 40px !important;
 }
 
+/* Fix positioning when collapsed - panel should stick to correct edge */
+.rpg-panel.rpg-position-right.rpg-collapsed {
+    left: calc(100vw - 40px);
+    right: 0;
+}
+
+.rpg-panel.rpg-position-left.rpg-collapsed {
+    right: calc(100vw - 40px);
+    left: 0;
+}
+
 .rpg-panel.rpg-collapsed .rpg-game-container {
     opacity: 0;
     pointer-events: none;
@@ -357,6 +368,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     flex-direction: column;
     height: 100%;
     overflow: hidden;
+    transition: opacity 0.3s ease;
 }
 
 /* Panel Content - Main scrollable area */