@carbon/ai-chat-components 0.8.0 → 0.9.0

package/es/components/chat-shell/src/workspace-manager.js

@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import throttle from 'lodash-es/throttle';
+import throttle from 'lodash-es/throttle.js';
+import { getInlineSizeFromEntry, shouldSkipWorkspaceUpdate, calculateRequiredWidth, isWideEnough, canHostGrow, hasSignificantWidthChange, areWorkspaceAttributesCorrect, getCssLengthFromProperty } from './workspace-manager-utils.js';
 
 /**
  * @license
@@ -18,6 +19,8 @@ import throttle from 'lodash-es/throttle';
 const WORKSPACE_MIN_WIDTH_FALLBACK = 640;
 const MESSAGES_MIN_WIDTH_FALLBACK = 320;
 const HISTORY_WIDTH_FALLBACK = 320;
+const EXPANSION_POLL_INTERVAL_MS = 200;
+const EXPANSION_THRESHOLD_PX = 1;
 /**
  * Manages workspace layout, responsive behavior, and transitions for cds-aichat-shell.
  * Handles switching between inline and panel modes based on available width,
@@ -32,7 +35,9 @@ class WorkspaceManager {
             inPanel: false,
             contentVisible: true,
             containerVisible: false,
+            isCheckingExpansion: false,
             isExpanding: false,
+            isCheckingContracting: false,
             isContracting: false,
         };
         this.lastKnownCssValues = {};
@@ -45,7 +50,6 @@ class WorkspaceManager {
      */
     connect() {
         if (this.config.showWorkspace) {
-            this.observeHostWidth();
             this.handleShowWorkspaceEnabled();
         }
         this.observeCssProperties();
@@ -60,7 +64,7 @@ class WorkspaceManager {
             window.removeEventListener("resize", this.windowResizeHandler);
         }
         this.clearExpansionTimers();
-        this.clearClosingTimer();
+        this.clearContractionTimers();
         this.cssPropertyObserver?.disconnect();
     }
     /**
@@ -83,7 +87,7 @@ class WorkspaceManager {
         // Handle showWorkspace changes
         if (newConfig.showWorkspace !== undefined) {
             if (newConfig.showWorkspace && !oldConfig.showWorkspace) {
-                this.observeHostWidth();
+                // handleShowWorkspaceEnabled will call observeHostWidth at the right time
                 this.handleShowWorkspaceEnabled();
             }
             else if (!newConfig.showWorkspace && oldConfig.showWorkspace) {
@@ -114,13 +118,41 @@ class WorkspaceManager {
      * Check if workspace should be rendered inline (side-by-side with messages).
      */
     shouldRenderInline() {
-        return this.state.containerVisible && !this.state.inPanel;
+        // During checking phase, optimistically render inline
+        if (this.state.isCheckingExpansion) {
+            return (this.state.containerVisible &&
+                !this.state.isContracting &&
+                !this.state.isCheckingContracting);
+        }
+        // During expanding phase, always render inline (will be hidden with CSS)
+        if (this.state.isExpanding) {
+            return (this.state.containerVisible &&
+                !this.state.isContracting &&
+                !this.state.isCheckingContracting);
+        }
+        // During checking-contracting phase, keep rendering inline to maintain layout
+        if (this.state.isCheckingContracting) {
+            return this.state.containerVisible;
+        }
+        // During contracting phase, keep rendering inline to maintain layout
+        // Container will be removed from DOM at the very end
+        if (this.state.isContracting) {
+            return this.state.containerVisible;
+        }
+        // In stable state, render inline if not in panel mode
+        const returnValue = this.state.containerVisible && !this.state.inPanel;
+        return returnValue;
     }
     /**
      * Check if workspace should be rendered as a panel (overlay).
      */
     shouldRenderPanel() {
-        return this.state.containerVisible && this.state.inPanel;
+        return (this.state.containerVisible &&
+            this.state.inPanel &&
+            !this.state.isCheckingExpansion &&
+            !this.state.isExpanding &&
+            !this.state.isCheckingContracting &&
+            !this.state.isContracting);
     }
     // ========== Private Methods ==========
     observeHostWidth() {
@@ -148,10 +180,13 @@ class WorkspaceManager {
     }
     createHostResizeObserver() {
         this.hostResizeObserver = new ResizeObserver((entries) => {
-            for (const entry of entries) {
-                const inlineSize = this.getInlineSizeFromEntry(entry);
-                this.throttledHandleHostResize(inlineSize);
-            }
+            // Use requestAnimationFrame to avoid ResizeObserver loop errors
+            requestAnimationFrame(() => {
+                for (const entry of entries) {
+                    const inlineSize = getInlineSizeFromEntry(entry);
+                    this.throttledHandleHostResize(inlineSize);
+                }
+            });
         });
         this.hostResizeObserver.observe(this.hostElement);
     }
@@ -167,6 +202,10 @@ class WorkspaceManager {
             this.setWorkspaceInPanel(false);
             return;
         }
+        // Don't perform initial measurement during expansion/contraction
+        if (this.state.isExpanding || this.state.isContracting) {
+            return;
+        }
         this.handleHostResize(currentWidth);
     }
     handleHostResize(inlineSize) {
@@ -174,6 +213,10 @@ class WorkspaceManager {
             this.trackExpectedExpansion(inlineSize);
             return;
         }
+        if (this.state.isCheckingContracting) {
+            this.trackExpectedContraction(inlineSize);
+            return;
+        }
         if (this.state.isContracting) {
             return;
         }
@@ -183,102 +226,240 @@ class WorkspaceManager {
         if (!Number.isFinite(inlineSize)) {
             return;
         }
-        if (!this.config.showWorkspace ||
-            !this.state.containerVisible ||
-            this.state.isContracting) {
+        if (shouldSkipWorkspaceUpdate(this.config, this.state)) {
             this.setWorkspaceInPanel(false);
             return;
         }
-        const workspaceMinWidth = this.getCssLengthFromProperty("--cds-aichat-workspace-min-width", WORKSPACE_MIN_WIDTH_FALLBACK);
-        const messagesMinWidth = this.getCssLengthFromProperty("--cds-aichat-messages-min-width", MESSAGES_MIN_WIDTH_FALLBACK);
-        const historyWidth = this.config.showHistory
-            ? this.getCssLengthFromProperty("--cds-aichat-history-width", HISTORY_WIDTH_FALLBACK)
-            : 0;
-        const sideBySideMinWidth = workspaceMinWidth + messagesMinWidth + historyWidth;
+        // Skip during expansion
+        if (this.state.isExpanding) {
+            return;
+        }
+        const dimensions = this.getLayoutDimensions();
+        const sideBySideMinWidth = calculateRequiredWidth(dimensions);
         const shouldBeInPanel = inlineSize < sideBySideMinWidth;
         this.setWorkspaceInPanel(shouldBeInPanel);
     }
+    /**
+     * Get layout dimensions from cache or compute if not available.
+     * Uses cached CSS values for performance, falling back to live computation.
+     */
+    getLayoutDimensions() {
+        // Ensure cache is populated
+        if (!this.lastKnownCssValues.workspaceMinWidth) {
+            this.updateLastKnownCssValues();
+        }
+        return {
+            workspaceMinWidth: this.lastKnownCssValues.workspaceMinWidth ??
+                WORKSPACE_MIN_WIDTH_FALLBACK,
+            messagesMinWidth: this.lastKnownCssValues.messagesMinWidth ?? MESSAGES_MIN_WIDTH_FALLBACK,
+            historyWidth: this.config.showHistory
+                ? (this.lastKnownCssValues.historyWidth ?? HISTORY_WIDTH_FALLBACK)
+                : 0,
+        };
+    }
     handleShowWorkspaceEnabled() {
         // Cancel any ongoing closing animation
-        this.clearClosingTimer();
-        this.setState({ isContracting: false });
-        // Show the workspace container immediately
-        this.setShowWorkspaceContainer(true);
+        this.clearContractionTimers();
+        this.setState({ isCheckingContracting: false, isContracting: false });
         const inlineSize = this.hostElement.getBoundingClientRect().width;
         const requiredWidth = this.getRequiredMinWidth();
         // Scenario 1: Already wide enough - show immediately
-        if (this.isWideEnough(inlineSize, requiredWidth)) {
-            this.finalizeImmediateDisplay(inlineSize, false);
+        if (isWideEnough(inlineSize, requiredWidth)) {
+            this.initializeImmediateDisplay("container", inlineSize);
             return;
         }
         // Scenario 2: Host can't ever reach required size - go straight to panel
-        if (!this.canHostGrow(requiredWidth)) {
-            this.finalizeImmediateDisplay(inlineSize, true);
+        if (!canHostGrow(requiredWidth)) {
+            this.initializeImmediateDisplay("panel", inlineSize);
             return;
         }
         // Scenario 3: Expecting expansion - setup tracking
+        this.initializeExpansionTracking();
+    }
+    initializeImmediateDisplay(mode, inlineSize) {
+        const attribute = mode === "container" ? "workspace-in-container" : "workspace-in-panel";
+        // Pre-set workspace attribute to prevent layout flash
+        this.hostElement.setAttribute(attribute, "");
+        // Show the workspace container immediately
+        this.setShowWorkspaceContainer(true);
+        this.observeHostWidth();
+        this.finalizeImmediateDisplay(inlineSize, mode === "panel");
+    }
+    initializeExpansionTracking() {
+        // Set isCheckingExpansion BEFORE showing container AND observing
+        // This allows workspace to render inline but remain invisible while we check for expansion
+        this.setState({ isCheckingExpansion: true });
+        // Don't pre-set workspace mode - let expansion tracking determine it
+        // The workspace-checking class on shell will handle the transition state
+        this.setShowWorkspaceContainer(true);
+        this.observeHostWidth();
         this.setupExpansionTracking();
     }
     handleShowWorkspaceDisabled() {
-        // Step 1: Immediately mark that we're closing to prevent mode switches
-        // This must happen FIRST before any other state changes
-        this.setState({ isContracting: true });
-        // Step 2: Lock in the current panel state to prevent it from changing
-        // Store the current value so it doesn't change during closing
-        const wasInPanel = this.state.inPanel;
-        // Step 3: Immediately hide the workspace content (opacity goes to 0 instantly)
+        // Step 1: Clear any ongoing expansion tracking first
+        this.clearExpansionTimers();
+        this.setState({ isCheckingExpansion: false, isExpanding: false });
+        // Step 2: Immediately hide the workspace content (opacity goes to 0 instantly)
         this.setWorkspaceContentVisible(false);
-        // Step 4: Restore the panel state in case setWorkspaceContentVisible triggered a change
-        if (this.state.inPanel !== wasInPanel) {
-            this.setWorkspaceInPanel(wasInPanel);
+        // Step 3: Check if we need to track contraction
+        const currentWidth = this.hostElement.getBoundingClientRect().width;
+        const requiredWidth = this.getRequiredMinWidth();
+        // If host is currently wide enough for inline workspace, expect contraction
+        if (isWideEnough(currentWidth, requiredWidth) &&
+            canHostGrow(requiredWidth)) {
+            this.setupContractionTracking();
+        }
+        else {
+            // No contraction expected, go straight to closing
+            this.initializeImmediateClosing();
         }
-        // Step 5: Clear any ongoing expansion tracking
-        this.clearExpansionTimers();
-        this.setState({ isExpanding: false });
-        // Step 6: Disconnect host resize observer to prevent interference during closing
-        this.hostResizeObserver?.disconnect();
-        this.hostResizeObserver = undefined;
-        // Step 7: Poll to check if host has finished contracting
-        // Keep the workspace container visible (but empty) during this time
-        // to maintain its width and prevent messages area from expanding
-        this.clearClosingTimer();
-        this.closingLastInlineSize = this.hostElement.getBoundingClientRect().width;
-        this.startClosingPolling();
     }
     startExpansionPolling() {
-        const initialWidth = this.expansionLastInlineSize;
-        // Check every 100ms if the host has stopped resizing
+        const initialWidth = this.expansionLastInlineSize ?? 0;
+        const hasSetContainerMode = { value: false };
         this.expansionCheckInterval = window.setInterval(() => {
-            const currentWidth = this.hostElement.getBoundingClientRect().width;
-            // If width hasn't changed from last check, the transition is complete
-            if (currentWidth === this.expansionLastInlineSize) {
-                // If we never saw any movement from initial width, go to panel mode
-                const sawMovement = currentWidth !== initialWidth;
-                this.finishWorkspaceExpansion(sawMovement);
-            }
-            else {
-                this.expansionLastInlineSize = currentWidth;
-            }
-        }, 100);
+            this.checkExpansionProgress(initialWidth, hasSetContainerMode);
+        }, EXPANSION_POLL_INTERVAL_MS);
     }
-    startClosingPolling() {
-        // Check every 100ms if the host has stopped resizing
-        this.closingCheckInterval = window.setInterval(() => {
+    /**
+     * Check expansion progress and determine if transition is complete.
+     */
+    checkExpansionProgress(initialWidth, hasSetContainerMode) {
+        const currentWidth = this.hostElement.getBoundingClientRect().width;
+        if (currentWidth === this.expansionLastInlineSize) {
+            // Width stabilized - expansion complete
+            const sawMovement = hasSignificantWidthChange(currentWidth, initialWidth, EXPANSION_THRESHOLD_PX);
+            this.finishWorkspaceExpansion(sawMovement);
+        }
+        else {
+            // Width still changing - track ongoing expansion
+            this.handleOngoingExpansion(currentWidth, initialWidth, hasSetContainerMode);
+        }
+    }
+    /**
+     * Handle ongoing width changes during expansion.
+     */
+    handleOngoingExpansion(currentWidth, initialWidth, hasSetContainerMode) {
+        // Set workspace-in-container mode on first detected meaningful movement
+        if (!hasSetContainerMode.value &&
+            hasSignificantWidthChange(currentWidth, initialWidth, EXPANSION_THRESHOLD_PX)) {
+            // Transition from checking to confirmed expanding
+            this.setState({ isCheckingExpansion: false, isExpanding: true });
+            this.setWorkspaceInContainerMode();
+            hasSetContainerMode.value = true;
+        }
+        this.expansionLastInlineSize = currentWidth;
+    }
+    /**
+     * Set workspace to container mode by updating DOM attributes.
+     */
+    setWorkspaceInContainerMode() {
+        this.hostElement.removeAttribute("workspace-in-panel");
+        this.hostElement.setAttribute("workspace-in-container", "");
+    }
+    setupContractionTracking() {
+        // Set isCheckingContracting BEFORE clearing attributes
+        // This allows workspace to stay inline while we check for contraction
+        this.setState({ isCheckingContracting: true });
+        // Store initial width for comparison
+        this.contractionInitialInlineSize =
+            this.hostElement.getBoundingClientRect().width;
+        this.contractionLastInlineSize = this.contractionInitialInlineSize;
+        // Keep observing host width to detect contraction
+        // Don't disconnect the observer - we need it to track contraction
+        this.startContractionPolling();
+    }
+    initializeImmediateClosing() {
+        // Mark as contracting and proceed directly to closing
+        this.setState({ isContracting: true });
+        // Disconnect host resize observer
+        this.hostResizeObserver?.disconnect();
+        this.hostResizeObserver = undefined;
+        // Immediately finish closing (will clear attributes)
+        this.finishWorkspaceClosing();
+    }
+    startContractionPolling() {
+        const initialWidth = this.contractionInitialInlineSize ?? 0;
+        const hasSetContractingMode = { value: false };
+        this.contractionCheckInterval = window.setInterval(() => {
+            this.checkContractionProgress(initialWidth, hasSetContractingMode);
+        }, EXPANSION_POLL_INTERVAL_MS);
+    }
+    checkContractionProgress(initialWidth, hasSetContractingMode) {
+        const currentWidth = this.hostElement.getBoundingClientRect().width;
+        if (currentWidth === this.contractionLastInlineSize) {
+            // Width stabilized - contraction complete
+            const sawMovement = hasSignificantWidthChange(currentWidth, initialWidth, EXPANSION_THRESHOLD_PX);
+            this.finishWorkspaceContraction(sawMovement);
+        }
+        else {
+            // Width still changing - track ongoing contraction
+            this.handleOngoingContraction(currentWidth, initialWidth, hasSetContractingMode);
+        }
+    }
+    handleOngoingContraction(currentWidth, initialWidth, hasSetContractingMode) {
+        // Set contracting mode on first detected meaningful shrinkage
+        if (!hasSetContractingMode.value &&
+            hasSignificantWidthChange(currentWidth, initialWidth, EXPANSION_THRESHOLD_PX) &&
+            currentWidth < initialWidth) {
+            // Transition from checking to confirmed contracting
+            // DON'T clear workspace attributes yet - keep them to maintain layout
+            this.setState({ isCheckingContracting: false, isContracting: true });
+            hasSetContractingMode.value = true;
+        }
+        this.contractionLastInlineSize = currentWidth;
+    }
+    finishWorkspaceContraction(sawMovement) {
+        // Clear checking-contracting flag and timers
+        this.setState({ isCheckingContracting: false });
+        this.clearContractionTimers();
+        if (!sawMovement) {
+            // No contraction happened, safe to close immediately
+            this.setState({ isContracting: true });
+            this.hostResizeObserver?.disconnect();
+            this.hostResizeObserver = undefined;
+            // Clear attributes and finish closing
+            this.finishWorkspaceClosing();
+        }
+        else {
+            // Contraction happened, need to wait for host to finish contracting
+            // before removing workspace from DOM
+            this.setState({ isContracting: true });
+            // DON'T clear workspace attributes yet - keep them to maintain layout
+            // They will be cleared in finishWorkspaceClosing()
+            // Disconnect host resize observer to prevent interference
+            this.hostResizeObserver?.disconnect();
+            this.hostResizeObserver = undefined;
+            // Start polling to detect when host has finished contracting
+            this.contractionLastInlineSize =
+                this.hostElement.getBoundingClientRect().width;
+            this.startFinalContractionPolling();
+        }
+    }
+    startFinalContractionPolling() {
+        this.contractionCheckInterval = window.setInterval(() => {
             const currentWidth = this.hostElement.getBoundingClientRect().width;
-            // If width hasn't changed, the transition is complete
-            if (currentWidth === this.closingLastInlineSize) {
+            // If width hasn't changed, the host has finished contracting
+            if (currentWidth === this.contractionLastInlineSize) {
                 this.finishWorkspaceClosing();
             }
             else {
-                this.closingLastInlineSize = currentWidth;
+                this.contractionLastInlineSize = currentWidth;
             }
-        }, 100);
+        }, EXPANSION_POLL_INTERVAL_MS);
+    }
+    trackExpectedContraction(inlineSize) {
+        if (!Number.isFinite(inlineSize)) {
+            return;
+        }
+        // Update the last known size - the polling interval will detect when it stops changing
+        this.contractionLastInlineSize = inlineSize;
     }
     finishWorkspaceExpansion(sawMovement) {
         const inlineSize = this.expansionLastInlineSize ??
             this.hostElement.getBoundingClientRect().width;
-        // Clear the expansion flag and timers first
-        this.setState({ isExpanding: false });
+        // Clear both checking and expanding flags and timers
+        this.setState({ isCheckingExpansion: false, isExpanding: false });
         this.clearExpansionTimers();
         // Determine the correct panel state BEFORE showing content
         if (!sawMovement) {
@@ -291,15 +472,27 @@ class WorkspaceManager {
         this.setWorkspaceContentVisible(true);
     }
     finishWorkspaceClosing() {
-        // Now hide the workspace container (removes from DOM)
+        // IMPORTANT: Remove workspace container from DOM FIRST while attributes are still present
+        // This prevents input-and-messages from expanding while workspace is still in DOM
         this.setShowWorkspaceContainer(false);
-        // Reset workspace state
-        this.setWorkspaceInPanel(false);
-        this.setState({ isContracting: false });
+        // Now clear attributes AFTER container is removed from DOM
+        this.hostElement.removeAttribute("workspace-in-panel");
+        this.hostElement.removeAttribute("workspace-in-container");
+        // Reset workspace state to original values
+        this.setState({
+            inPanel: false,
+            contentVisible: true,
+            containerVisible: false,
+            isCheckingExpansion: false,
+            isExpanding: false,
+            isCheckingContracting: false,
+            isContracting: false,
+        });
         // Clear the timers
-        this.clearClosingTimer();
+        this.clearContractionTimers();
         // Reset tracking
-        this.closingLastInlineSize = undefined;
+        this.contractionLastInlineSize = undefined;
+        this.contractionInitialInlineSize = undefined;
     }
     trackExpectedExpansion(inlineSize) {
         if (!Number.isFinite(inlineSize)) {
@@ -315,18 +508,56 @@ class WorkspaceManager {
         }
         this.expansionLastInlineSize = undefined;
     }
-    clearClosingTimer() {
-        if (this.closingCheckInterval) {
-            clearInterval(this.closingCheckInterval);
-            this.closingCheckInterval = undefined;
+    clearContractionTimers() {
+        if (this.contractionCheckInterval) {
+            clearInterval(this.contractionCheckInterval);
+            this.contractionCheckInterval = undefined;
         }
+        this.contractionLastInlineSize = undefined;
+        this.contractionInitialInlineSize = undefined;
+    }
+    /**
+     * Updates workspace DOM attributes to match the panel state.
+     * Maintains inverse relationship between panel and container attributes.
+     *
+     * @param inPanel - True for panel mode, false for container mode
+     */
+    updateWorkspaceAttributes(inPanel) {
+        this.hostElement.toggleAttribute("workspace-in-panel", inPanel);
+        // workspace-in-container is the inverse of workspace-in-panel
+        this.hostElement.toggleAttribute("workspace-in-container", !inPanel);
     }
+    /**
+     * Updates the workspace panel state and corresponding DOM attributes.
+     *
+     * Synchronizes internal state with DOM attributes that control whether
+     * the workspace is displayed as an overlay panel or inline container.
+     *
+     * Ignores calls during expansion/contraction transitions. Only updates if
+     * state or attributes need changes. Maintains inverse relationship between
+     * panel and container attributes.
+     *
+     * @param inPanel - True to display workspace as overlay panel, false for inline
+     */
     setWorkspaceInPanel(inPanel) {
-        if (this.state.inPanel === inPanel) {
+        // Early exit during transitions
+        if (this.state.isExpanding ||
+            this.state.isCheckingContracting ||
+            this.state.isContracting) {
             return;
         }
-        this.setState({ inPanel });
-        this.hostElement.toggleAttribute("workspace-in-panel", inPanel);
+        const stateChanged = this.state.inPanel !== inPanel;
+        const attributesCorrect = areWorkspaceAttributesCorrect(this.hostElement, inPanel);
+        // Nothing to do if state and attributes are already correct
+        if (!stateChanged && attributesCorrect) {
+            return;
+        }
+        // Update state if needed
+        if (stateChanged) {
+            this.setState({ inPanel });
+        }
+        // Update attributes
+        this.updateWorkspaceAttributes(inPanel);
         this.requestHostUpdate();
     }
     setWorkspaceContentVisible(visible) {
@@ -348,6 +579,8 @@ class WorkspaceManager {
         this.updateShellClasses();
     }
     updateShellClasses() {
+        this.shellRoot.classList.toggle("workspace-checking", this.state.isCheckingExpansion);
+        this.shellRoot.classList.toggle("workspace-checking-closing", this.state.isCheckingContracting);
         this.shellRoot.classList.toggle("workspace-closing", this.state.isContracting);
         this.shellRoot.classList.toggle("workspace-opening", this.state.isExpanding);
     }
@@ -358,19 +591,13 @@ class WorkspaceManager {
         }
     }
     getRequiredMinWidth() {
-        const workspaceMinWidth = this.getCssLengthFromProperty("--cds-aichat-workspace-min-width", WORKSPACE_MIN_WIDTH_FALLBACK);
-        const messagesMinWidth = this.getCssLengthFromProperty("--cds-aichat-messages-min-width", MESSAGES_MIN_WIDTH_FALLBACK);
+        const workspaceMinWidth = getCssLengthFromProperty(this.hostElement, "--cds-aichat-workspace-min-width", WORKSPACE_MIN_WIDTH_FALLBACK);
+        const messagesMinWidth = getCssLengthFromProperty(this.hostElement, "--cds-aichat-messages-min-width", MESSAGES_MIN_WIDTH_FALLBACK);
         const historyWidth = this.config.showHistory
-            ? this.getCssLengthFromProperty("--cds-aichat-history-width", HISTORY_WIDTH_FALLBACK)
+            ? getCssLengthFromProperty(this.hostElement, "--cds-aichat-history-width", HISTORY_WIDTH_FALLBACK)
             : 0;
         return workspaceMinWidth + messagesMinWidth + historyWidth;
     }
-    isWideEnough(inlineSize, requiredWidth) {
-        return typeof window === "undefined" || inlineSize >= requiredWidth;
-    }
-    canHostGrow(requiredWidth) {
-        return typeof window !== "undefined" && window.innerWidth >= requiredWidth;
-    }
     finalizeImmediateDisplay(inlineSize, usePanel) {
         this.setWorkspaceContentVisible(true);
         this.setState({ isExpanding: false });
@@ -383,30 +610,15 @@ class WorkspaceManager {
         }
     }
     setupExpansionTracking() {
-        this.setState({ isExpanding: true });
+        // isExpanding is already set in handleShowWorkspaceEnabled
         this.clearExpansionTimers();
-        this.setWorkspaceInPanel(false);
+        // Don't set workspace-in-container early - wait to see if expansion actually happens
+        // This prevents the flash of container mode CSS when opening directly to panel mode
         this.setWorkspaceContentVisible(false);
         this.expansionLastInlineSize =
             this.hostElement.getBoundingClientRect().width;
         this.startExpansionPolling();
     }
-    getInlineSizeFromEntry(entry) {
-        const borderBoxSize = Array.isArray(entry.borderBoxSize)
-            ? entry.borderBoxSize[0]
-            : entry.borderBoxSize;
-        return borderBoxSize?.inlineSize ?? entry.contentRect.width;
-    }
-    getCssLengthFromProperty(propertyName, fallback) {
-        const value = getComputedStyle(this.hostElement)
-            .getPropertyValue(propertyName)
-            .trim();
-        if (!value) {
-            return fallback;
-        }
-        const parsed = Number.parseFloat(value);
-        return Number.isNaN(parsed) ? fallback : parsed;
-    }
     /**
      * Observe CSS custom properties that affect workspace layout.
      * When these properties change, recalculate workspace positioning.
@@ -431,18 +643,18 @@ class WorkspaceManager {
      */
     updateLastKnownCssValues() {
         this.lastKnownCssValues = {
-            workspaceMinWidth: this.getCssLengthFromProperty("--cds-aichat-workspace-min-width", WORKSPACE_MIN_WIDTH_FALLBACK),
-            messagesMinWidth: this.getCssLengthFromProperty("--cds-aichat-messages-min-width", MESSAGES_MIN_WIDTH_FALLBACK),
-            historyWidth: this.getCssLengthFromProperty("--cds-aichat-history-width", HISTORY_WIDTH_FALLBACK),
+            workspaceMinWidth: getCssLengthFromProperty(this.hostElement, "--cds-aichat-workspace-min-width", WORKSPACE_MIN_WIDTH_FALLBACK),
+            messagesMinWidth: getCssLengthFromProperty(this.hostElement, "--cds-aichat-messages-min-width", MESSAGES_MIN_WIDTH_FALLBACK),
+            historyWidth: getCssLengthFromProperty(this.hostElement, "--cds-aichat-history-width", HISTORY_WIDTH_FALLBACK),
         };
     }
     /**
      * Check if any relevant CSS properties have changed and trigger recalculation.
      */
     checkCssPropertyChanges() {
-        const workspaceMinWidth = this.getCssLengthFromProperty("--cds-aichat-workspace-min-width", WORKSPACE_MIN_WIDTH_FALLBACK);
-        const messagesMinWidth = this.getCssLengthFromProperty("--cds-aichat-messages-min-width", MESSAGES_MIN_WIDTH_FALLBACK);
-        const historyWidth = this.getCssLengthFromProperty("--cds-aichat-history-width", HISTORY_WIDTH_FALLBACK);
+        const workspaceMinWidth = getCssLengthFromProperty(this.hostElement, "--cds-aichat-workspace-min-width", WORKSPACE_MIN_WIDTH_FALLBACK);
+        const messagesMinWidth = getCssLengthFromProperty(this.hostElement, "--cds-aichat-messages-min-width", MESSAGES_MIN_WIDTH_FALLBACK);
+        const historyWidth = getCssLengthFromProperty(this.hostElement, "--cds-aichat-history-width", HISTORY_WIDTH_FALLBACK);
         const hasChanged = workspaceMinWidth !== this.lastKnownCssValues.workspaceMinWidth ||
             messagesMinWidth !== this.lastKnownCssValues.messagesMinWidth ||
             historyWidth !== this.lastKnownCssValues.historyWidth;
@@ -452,6 +664,7 @@ class WorkspaceManager {
             if (this.config.showWorkspace &&
                 this.state.containerVisible &&
                 !this.state.isExpanding &&
+                !this.state.isCheckingContracting &&
                 !this.state.isContracting) {
                 const currentWidth = this.hostElement.getBoundingClientRect().width;
                 this.updateWorkspaceInPanelState(currentWidth);