fix(Map): sync with ChatGPT displayMode for automatic collapse

Fixes display mode synchronization bug where clicking ChatGPT's X button
didn't collapse the Map component back to compact view.

Changes:
- Add useDisplayMode() hook to listen to ChatGPT's display mode changes
- Sync internal fullscreen state when ChatGPT displayMode changes
- Only sync in uncontrolled mode (respects external state management)
- Update Storybook docs to document display mode sync behavior

Implementation:
- Uses useEffect to detect displayMode changes from 'fullscreen' to 'inline'
- Automatically updates internalIsFullscreen state to match
- Two-way sync: widget responds to both internal and external display mode changes

Result:
- Clicking ChatGPT's X button now properly collapses map to compact view
- No manual reset needed
- Follows Album component pattern for ChatGPT Apps SDK integration

Author: JakeLin

packages/ui/src/components/Map/Map.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { CompactMap, type CompactMapProps } from './CompactMap';
 import { FullscreenMap, type FullscreenMapProps } from './FullscreenMap';
 import type { MapViewProps } from './MapView';
+import { useDisplayMode } from '../../hooks/openai';
 
 export interface MapProps extends Omit<MapViewProps, 'className' | 'style'> {
   /**
@@ -80,10 +81,23 @@ export const Map: React.FC<MapProps> = ({
 }) => {
   const [internalIsFullscreen, setInternalIsFullscreen] = React.useState(false);
 
+  // Listen to ChatGPT's displayMode changes
+  const displayMode = useDisplayMode();
+
   // Use controlled state if provided, otherwise use internal state
   const isControlled = controlledIsFullscreen !== undefined;
   const isFullscreen = isControlled ? controlledIsFullscreen : internalIsFullscreen;
 
+  // Sync internal state with ChatGPT's displayMode when not controlled
+  React.useEffect(() => {
+    if (!isControlled && displayMode) {
+      const shouldBeFullscreen = displayMode === 'fullscreen';
+      if (shouldBeFullscreen !== internalIsFullscreen) {
+        setInternalIsFullscreen(shouldBeFullscreen);
+      }
+    }
+  }, [displayMode, isControlled, internalIsFullscreen]);
+
   const handleExpand = async () => {
     // Request fullscreen mode from ChatGPT host
     if (window.openai?.requestDisplayMode) {

packages/ui/src/components/Map/Maps.stories.tsx

@@ -491,12 +491,19 @@ const MapSystemComponent: React.FC = () => {
             Use controlled mode to let ChatGPT manage the iframe expansion based on user
             interaction.
           </p>
-          <p style={{ margin: 0 }}>
+          <p style={{ margin: '0 0 12px 0' }}>
             When user clicks expand button → Map calls <code>onToggleFullscreen(true)</code> → Your
             app expands the iframe → User sees FullscreenMap. When user clicks collapse → Map calls{' '}
             <code>onToggleFullscreen(false)</code> → Your app collapses iframe → User sees
             CompactMap.
           </p>
+          <p style={{ margin: 0 }}>
+            <strong>🔄 Display Mode Sync:</strong> The Map component automatically listens to ChatGPT's{' '}
+            <code>displayMode</code> changes using the <code>useDisplayMode()</code> hook. This means
+            clicking ChatGPT's close button (X) will automatically collapse the map back to compact view
+            without requiring manual interaction. Two-way sync ensures your map stays in sync with
+            ChatGPT's UI state.
+          </p>
         </div>
 
         <div style={codeBlockStyles.primary}>
@@ -552,6 +559,10 @@ const handleMapToggle = (fullscreen: boolean) => {
             <li>CompactMap height: 478px (standard ChatGPT Apps size)</li>
             <li>Expand/collapse buttons automatically shown in both views</li>
             <li>Buttons automatically disabled if callbacks not provided</li>
+            <li>
+              <strong>Automatic sync with ChatGPT's display mode</strong> - clicking ChatGPT's X button
+              automatically collapses the map
+            </li>
             <li>Responsive design works on all device sizes</li>
           </ul>
         </div>

packages/ui/src/gallery/examples/Maps.stories.tsx

@@ -420,7 +420,8 @@ const MapsComponent: React.FC = () => {
           }}
         >
           The Map component is designed specifically for ChatGPT Apps SDK integration. Use the controlled mode pattern
-          shown below to let ChatGPT manage the iframe expansion when users click the expand button.
+          shown below to let ChatGPT manage the iframe expansion when users click the expand button. The component
+          automatically syncs with ChatGPT's display mode changes, so clicking ChatGPT's X button will collapse the map.
         </p>
 
         <div style={codeBlockStyles.primary}>
@@ -479,6 +480,10 @@ function MyMapApp() {
               <strong>isFullscreen + onToggleFullscreen:</strong> Map calls your callback when user clicks expand/collapse
               button
             </li>
+            <li>
+              <strong>Automatic Display Mode Sync:</strong> Map listens to ChatGPT's display mode changes - clicking
+              ChatGPT's X button automatically collapses the map
+            </li>
             <li>
               <strong>Default Size:</strong> CompactMap uses 478px height (ChatGPT Apps SDK standard)
             </li>