@ms-cloudpack/overlay 0.19.55 → 0.19.57

package/lib/handlePackageUpdate.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Handles hot module replacement (HMR) updates for packages.
+ *
+ * This function is called when the development server notifies the client that a package
+ * has been updated. It performs the following steps:
+ *
+ * 1. **Check which modules are loaded**: Uses Performance API to determine which entry points
+ *    from the package are actually loaded on the current page.
+ *
+ * 2. **Re-import updated modules**: Dynamically imports the new versions of loaded modules
+ *    using their updated bundle URLs (with new hash).
+ *
+ * 3. **Trigger React Refresh**: If React Refresh is available, triggers component updates
+ *    while preserving component state. Falls back to full page reload otherwise.
+ *
+ * The process ensures:
+ * - Only relevant modules are updated (skip modules not loaded on current page)
+ * - React component state is preserved when possible
+ * - Graceful fallback to full reload if React Refresh fails
+ *
+ * @param data - The package update payload containing package name, version, and entry points
+ *
+ * @example
+ * // This is typically called by the WebSocket message handler:
+ * socket.on('package-update', (data) => {
+ *   await handlePackageUpdate(data);
+ * });
+ */
+export declare const handlePackageUpdate: (data: unknown) => Promise<void>;
+//# sourceMappingURL=handlePackageUpdate.d.ts.map

package/lib/handlePackageUpdate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"handlePackageUpdate.d.ts","sourceRoot":"","sources":["../src/handlePackageUpdate.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,mBAAmB,GAAU,MAAM,OAAO,KAAG,OAAO,CAAC,IAAI,CAmFrE,CAAC"}

package/lib/handlePackageUpdate.js

@@ -0,0 +1,106 @@
+import { removeHashFromUrl } from '@ms-cloudpack/path-string-parsing';
+/**
+ * Handles hot module replacement (HMR) updates for packages.
+ *
+ * This function is called when the development server notifies the client that a package
+ * has been updated. It performs the following steps:
+ *
+ * 1. **Check which modules are loaded**: Uses Performance API to determine which entry points
+ *    from the package are actually loaded on the current page.
+ *
+ * 2. **Re-import updated modules**: Dynamically imports the new versions of loaded modules
+ *    using their updated bundle URLs (with new hash).
+ *
+ * 3. **Trigger React Refresh**: If React Refresh is available, triggers component updates
+ *    while preserving component state. Falls back to full page reload otherwise.
+ *
+ * The process ensures:
+ * - Only relevant modules are updated (skip modules not loaded on current page)
+ * - React component state is preserved when possible
+ * - Graceful fallback to full reload if React Refresh fails
+ *
+ * @param data - The package update payload containing package name, version, and entry points
+ *
+ * @example
+ * // This is typically called by the WebSocket message handler:
+ * socket.on('package-update', (data) => {
+ *   await handlePackageUpdate(data);
+ * });
+ */
+export const handlePackageUpdate = async (data) => {
+    const { packageName, entryPoints, version } = data;
+    try {
+        console.log(`[Cloudpack HMR] Package updated: ${packageName}@${version}`);
+        // Get all loaded resources for checking
+        const normalizedResources = performance.getEntriesByType('resource').map((r) => removeHashFromUrl(r.name));
+        // Process each entry point
+        let loadedCount = 0;
+        for (const { importPath, bundleUrl } of entryPoints) {
+            // Check if this module was actually loaded using Performance API
+            // bundleUrl already has the new hash: http://localhost:5500/pkg@1.0.0/h-abc123-1234567890/v1.2/bundled/lib/file.js
+            // We normalize both URLs by removing the hash to compare them
+            const normalizedBundleUrl = removeHashFromUrl(bundleUrl);
+            const wasLoaded = normalizedResources.some((r) => r === normalizedBundleUrl);
+            if (!wasLoaded) {
+                console.log(`[Cloudpack HMR] Skipping ${importPath} - not loaded on this page`);
+                continue;
+            }
+            console.log(`[Cloudpack HMR] Loading ${importPath} from ${bundleUrl}`);
+            // Dynamic import - use webpackIgnore to bypass bundler's import analysis
+            // This ensures we use the browser's native import() for runtime URL
+            await import(/* webpackIgnore: true */ bundleUrl);
+            loadedCount++;
+        }
+        if (loadedCount === 0) {
+            console.log(`[Cloudpack HMR] No entry points from ${packageName} were loaded on this page`);
+            return;
+        }
+        // ===== Trigger React Refresh =====
+        //
+        // React Refresh is a hot reloading feature that updates React components without losing state.
+        // It allows developers to see component changes instantly while preserving:
+        // - Component state (useState, useReducer)
+        // - Form inputs
+        // - Scroll position
+        // - Any other runtime state
+        //
+        // How it works:
+        // 1. When modules are re-imported above, React Refresh automatically detects changed components
+        // 2. Components are registered via $RefreshReg$ calls (injected by the bundler during build)
+        // 3. Calling performReactRefresh() re-renders the registered components with new code
+        // 4. React's reconciliation preserves state by matching component types and positions
+        //
+        // The $RefreshRuntime$ global is initialized in registerReactRefresh.ts
+        if (window.$RefreshRuntime$?.performReactRefresh) {
+            // Perform the actual refresh - this will update all components that were re-registered
+            // during the dynamic import above, while preserving their state
+            const refreshResult = window.$RefreshRuntime$.performReactRefresh();
+            if (refreshResult === null) {
+                // Refresh returned null - this indicates no components were registered
+                // This shouldn't happen if we successfully imported modules, so we fall back to full reload
+                console.warn(`[Cloudpack HMR] React Refresh returned null despite registrations, reloading page`);
+                window.location.reload();
+            }
+            else {
+                // React components successfully updated with state preservation
+                // refreshResult contains metadata about what was updated
+                console.log(`[Cloudpack HMR] ✓ Updated ${packageName}@${version}`, refreshResult);
+            }
+        }
+        else {
+            // React Refresh runtime is not available
+            // This happens when:
+            // - React Refresh wasn't initialized (registerReactRefresh.ts not called)
+            // - The app doesn't use React
+            // - React Refresh was disabled
+            // Fall back to full page reload to show the changes
+            console.warn(`[Cloudpack HMR] React Refresh runtime not found, reloading page`);
+            window.location.reload();
+        }
+    }
+    catch (error) {
+        console.error(`[Cloudpack HMR] ✗ Failed to update ${packageName}:`, error);
+        window.location.reload();
+    }
+};
+//# sourceMappingURL=handlePackageUpdate.js.map

package/lib/handlePackageUpdate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"handlePackageUpdate.js","sourceRoot":"","sources":["../src/handlePackageUpdate.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PackageUpdatePayload } from '@ms-cloudpack/api-server/browser';\nimport { removeHashFromUrl } from '@ms-cloudpack/path-string-parsing';\n\n/**\n * Handles hot module replacement (HMR) updates for packages.\n *\n * This function is called when the development server notifies the client that a package\n * has been updated. It performs the following steps:\n *\n * 1. **Check which modules are loaded**: Uses Performance API to determine which entry points\n *    from the package are actually loaded on the current page.\n *\n * 2. **Re-import updated modules**: Dynamically imports the new versions of loaded modules\n *    using their updated bundle URLs (with new hash).\n *\n * 3. **Trigger React Refresh**: If React Refresh is available, triggers component updates\n *    while preserving component state. Falls back to full page reload otherwise.\n *\n * The process ensures:\n * - Only relevant modules are updated (skip modules not loaded on current page)\n * - React component state is preserved when possible\n * - Graceful fallback to full reload if React Refresh fails\n *\n * @param data - The package update payload containing package name, version, and entry points\n *\n * @example\n * // This is typically called by the WebSocket message handler:\n * socket.on('package-update', (data) => {\n *   await handlePackageUpdate(data);\n * });\n */\nexport const handlePackageUpdate = async (data: unknown): Promise<void> => {\n  const { packageName, entryPoints, version } = data as PackageUpdatePayload;\n\n  try {\n    console.log(`[Cloudpack HMR] Package updated: ${packageName}@${version}`);\n\n    // Get all loaded resources for checking\n    const normalizedResources = (performance.getEntriesByType('resource') as PerformanceResourceTiming[]).map((r) =>\n      removeHashFromUrl(r.name),\n    );\n\n    // Process each entry point\n    let loadedCount = 0;\n    for (const { importPath, bundleUrl } of entryPoints) {\n      // Check if this module was actually loaded using Performance API\n      // bundleUrl already has the new hash: http://localhost:5500/pkg@1.0.0/h-abc123-1234567890/v1.2/bundled/lib/file.js\n      // We normalize both URLs by removing the hash to compare them\n      const normalizedBundleUrl = removeHashFromUrl(bundleUrl);\n      const wasLoaded = normalizedResources.some((r) => r === normalizedBundleUrl);\n\n      if (!wasLoaded) {\n        console.log(`[Cloudpack HMR] Skipping ${importPath} - not loaded on this page`);\n        continue;\n      }\n\n      console.log(`[Cloudpack HMR] Loading ${importPath} from ${bundleUrl}`);\n\n      // Dynamic import - use webpackIgnore to bypass bundler's import analysis\n      // This ensures we use the browser's native import() for runtime URL\n      await import(/* webpackIgnore: true */ bundleUrl);\n      loadedCount++;\n    }\n\n    if (loadedCount === 0) {\n      console.log(`[Cloudpack HMR] No entry points from ${packageName} were loaded on this page`);\n      return;\n    }\n\n    // ===== Trigger React Refresh =====\n    //\n    // React Refresh is a hot reloading feature that updates React components without losing state.\n    // It allows developers to see component changes instantly while preserving:\n    // - Component state (useState, useReducer)\n    // - Form inputs\n    // - Scroll position\n    // - Any other runtime state\n    //\n    // How it works:\n    // 1. When modules are re-imported above, React Refresh automatically detects changed components\n    // 2. Components are registered via $RefreshReg$ calls (injected by the bundler during build)\n    // 3. Calling performReactRefresh() re-renders the registered components with new code\n    // 4. React's reconciliation preserves state by matching component types and positions\n    //\n    // The $RefreshRuntime$ global is initialized in registerReactRefresh.ts\n    if (window.$RefreshRuntime$?.performReactRefresh) {\n      // Perform the actual refresh - this will update all components that were re-registered\n      // during the dynamic import above, while preserving their state\n      const refreshResult = window.$RefreshRuntime$.performReactRefresh();\n\n      if (refreshResult === null) {\n        // Refresh returned null - this indicates no components were registered\n        // This shouldn't happen if we successfully imported modules, so we fall back to full reload\n        console.warn(`[Cloudpack HMR] React Refresh returned null despite registrations, reloading page`);\n        window.location.reload();\n      } else {\n        // React components successfully updated with state preservation\n        // refreshResult contains metadata about what was updated\n        console.log(`[Cloudpack HMR] ✓ Updated ${packageName}@${version}`, refreshResult);\n      }\n    } else {\n      // React Refresh runtime is not available\n      // This happens when:\n      // - React Refresh wasn't initialized (registerReactRefresh.ts not called)\n      // - The app doesn't use React\n      // - React Refresh was disabled\n      // Fall back to full page reload to show the changes\n      console.warn(`[Cloudpack HMR] React Refresh runtime not found, reloading page`);\n      window.location.reload();\n    }\n  } catch (error) {\n    console.error(`[Cloudpack HMR] ✗ Failed to update ${packageName}:`, error);\n    window.location.reload();\n  }\n};\n"]}

package/lib/index.js

@@ -4,7 +4,8 @@ import { CloudpackProvider } from './components/CloudpackProvider/CloudpackProvi
 import { Overlay } from './components/Overlay/Overlay.js';
 import { ThemeProvider } from './components/ThemeProvider/ThemeProvider.js';
 import { elementIds } from './constants.js';
-import { createCloudpackClient, reloadCountSource } from '@ms-cloudpack/api-server/browser';
+import { createCloudpackClient, reloadCountSource, packageUpdateSource } from '@ms-cloudpack/api-server/browser';
+import { handlePackageUpdate } from './handlePackageUpdate.js';
 async function start() {
     if (!window.__cloudpack) {
         throw new Error('Cloudpack not found on window');
@@ -13,7 +14,7 @@ async function start() {
     if (!pageSessionContext) {
         throw new Error('Session context not found on window.__cloudpack');
     }
-    const { apiUrl, currentSequence, sessionId, showOverlay } = pageSessionContext;
+    const { apiUrl, currentSequence, sessionId, showOverlay, features } = pageSessionContext;
     // injectScripts shouldn't inject the overlay if it's disabled, but check here too
     if (showOverlay === 'never') {
         return;
@@ -38,6 +39,12 @@ async function start() {
             });
         },
     });
+    // Subscribe to HMR package updates
+    if (features?.hmr) {
+        const { registerReactRefresh } = await import('./registerReactRefresh.js');
+        registerReactRefresh();
+        client.onDataChanged.subscribe(packageUpdateSource, { onData: (data) => void handlePackageUpdate(data) });
+    }
     client.onDataChanged.subscribe(reloadCountSource, {
         onData: (data) => {
             if (Number(data) > currentSequence) {

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qDAAqD,CAAC;AACxF,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,6CAA6C,CAAC;AAC5E,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAE5F,KAAK,UAAU,KAAK;IAClB,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC;QACxB,MAAM,IAAI,KAAK,CAAC,+BAA+B,CAAC,CAAC;IACnD,CAAC;IAED,MAAM,EAAE,kBAAkB,EAAE,GAAG,MAAM,CAAC,WAAW,CAAC;IAElD,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACxB,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;IACrE,CAAC;IAED,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,kBAAkB,CAAC;IAE/E,kFAAkF;IAClF,IAAI,WAAW,KAAK,OAAO,EAAE,CAAC;QAC5B,OAAO;IACT,CAAC;IAED,MAAM,MAAM,GAAG,MAAM,qBAAqB,CAAC;QACzC,GAAG,EAAE,MAAM;QACX,MAAM,EAAE,GAAG,EAAE;YACX,MAAM,CAAC,YAAY;iBAChB,KAAK,EAAE;iBACP,IAAI,CAAC,CAAC,YAAY,EAAE,EAAE;gBACrB,IAAI,SAAS,KAAK,YAAY,EAAE,CAAC;oBAC/B,OAAO,CAAC,GAAG,CAAC,wCAAwC,EAAE,SAAS,CAAC,CAAC;gBACnE,CAAC;qBAAM,CAAC;oBACN,OAAO,CAAC,IAAI,CAAC,4CAA4C,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC;oBAChG,iGAAiG;oBACjG,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;gBAC3B,CAAC;YACH,CAAC,CAAC;iBACD,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE;gBACb,OAAO,CAAC,KAAK,CAAC,uCAAuC,EAAE,GAAG,CAAC,CAAC;YAC9D,CAAC,CAAC,CAAC;QACP,CAAC;KACF,CAAC,CAAC;IAEH,MAAM,CAAC,aAAa,CAAC,SAAS,CAAC,iBAAiB,EAAE;QAChD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;YACf,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,eAAe,EAAE,CAAC;gBACnC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;YAC3B,CAAC;QACH,CAAC;KACF,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC;IAE7B,MAAM,CACJ,KAAC,aAAa,cACZ,KAAC,iBAAiB,IAAC,MAAM,EAAE,MAAM,YAC/B,KAAC,OAAO,KAAG,GACO,GACN,EAChB,OAAO,CACR,CAAC;IAEF,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;AACrC,CAAC;AAED,KAAK,KAAK,EAAE,CAAC","sourcesContent":["import { render } from 'preact';\nimport { CloudpackProvider } from './components/CloudpackProvider/CloudpackProvider.js';\nimport { Overlay } from './components/Overlay/Overlay.js';\nimport { ThemeProvider } from './components/ThemeProvider/ThemeProvider.js';\nimport { elementIds } from './constants.js';\nimport { createCloudpackClient, reloadCountSource } from '@ms-cloudpack/api-server/browser';\n\nasync function start(): Promise<void> {\n  if (!window.__cloudpack) {\n    throw new Error('Cloudpack not found on window');\n  }\n\n  const { pageSessionContext } = window.__cloudpack;\n\n  if (!pageSessionContext) {\n    throw new Error('Session context not found on window.__cloudpack');\n  }\n\n  const { apiUrl, currentSequence, sessionId, showOverlay } = pageSessionContext;\n\n  // injectScripts shouldn't inject the overlay if it's disabled, but check here too\n  if (showOverlay === 'never') {\n    return;\n  }\n\n  const client = await createCloudpackClient({\n    url: apiUrl,\n    onOpen: () => {\n      client.getSessionId\n        .query()\n        .then((newSessionId) => {\n          if (sessionId === newSessionId) {\n            console.log('[Cloudpack] socket opened, session Id:', sessionId);\n          } else {\n            console.warn('[Cloudpack] session ID mismatch, expected:', sessionId, 'but got:', newSessionId);\n            // One possible reason for this is that the config has changed and the page needs to be reloaded.\n            window.location.reload();\n          }\n        })\n        .catch((err) => {\n          console.error('[Cloudpack] Error getting session Id:', err);\n        });\n    },\n  });\n\n  client.onDataChanged.subscribe(reloadCountSource, {\n    onData: (data) => {\n      if (Number(data) > currentSequence) {\n        window.location.reload();\n      }\n    },\n  });\n\n  const rootDiv = document.createElement('div');\n  rootDiv.id = elementIds.root;\n\n  render(\n    <ThemeProvider>\n      <CloudpackProvider client={client}>\n        <Overlay />\n      </CloudpackProvider>\n    </ThemeProvider>,\n    rootDiv,\n  );\n\n  document.body.appendChild(rootDiv);\n}\n\nvoid start();\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { render } from 'preact';\nimport { CloudpackProvider } from './components/CloudpackProvider/CloudpackProvider.js';\nimport { Overlay } from './components/Overlay/Overlay.js';\nimport { ThemeProvider } from './components/ThemeProvider/ThemeProvider.js';\nimport { elementIds } from './constants.js';\nimport { createCloudpackClient, reloadCountSource, packageUpdateSource } from '@ms-cloudpack/api-server/browser';\nimport { handlePackageUpdate } from './handlePackageUpdate.js';\n\nasync function start(): Promise<void> {\n  if (!window.__cloudpack) {\n    throw new Error('Cloudpack not found on window');\n  }\n\n  const { pageSessionContext } = window.__cloudpack;\n\n  if (!pageSessionContext) {\n    throw new Error('Session context not found on window.__cloudpack');\n  }\n\n  const { apiUrl, currentSequence, sessionId, showOverlay, features } = pageSessionContext;\n\n  // injectScripts shouldn't inject the overlay if it's disabled, but check here too\n  if (showOverlay === 'never') {\n    return;\n  }\n\n  const client = await createCloudpackClient({\n    url: apiUrl,\n    onOpen: () => {\n      client.getSessionId\n        .query()\n        .then((newSessionId) => {\n          if (sessionId === newSessionId) {\n            console.log('[Cloudpack] socket opened, session Id:', sessionId);\n          } else {\n            console.warn('[Cloudpack] session ID mismatch, expected:', sessionId, 'but got:', newSessionId);\n            // One possible reason for this is that the config has changed and the page needs to be reloaded.\n            window.location.reload();\n          }\n        })\n        .catch((err) => {\n          console.error('[Cloudpack] Error getting session Id:', err);\n        });\n    },\n  });\n\n  // Subscribe to HMR package updates\n  if (features?.hmr) {\n    const { registerReactRefresh } = await import('./registerReactRefresh.js');\n    registerReactRefresh();\n    client.onDataChanged.subscribe(packageUpdateSource, { onData: (data) => void handlePackageUpdate(data) });\n  }\n  client.onDataChanged.subscribe(reloadCountSource, {\n    onData: (data) => {\n      if (Number(data) > currentSequence) {\n        window.location.reload();\n      }\n    },\n  });\n\n  const rootDiv = document.createElement('div');\n  rootDiv.id = elementIds.root;\n\n  render(\n    <ThemeProvider>\n      <CloudpackProvider client={client}>\n        <Overlay />\n      </CloudpackProvider>\n    </ThemeProvider>,\n    rootDiv,\n  );\n\n  document.body.appendChild(rootDiv);\n}\n\nvoid start();\n"]}

package/lib/registerReactRefresh.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Initializes the React Refresh runtime for hot module replacement (HMR).
+ *
+ * React Refresh enables fast refresh of React components without losing their state.
+ * This function sets up the necessary global hooks and functions that the bundler-transformed
+ * code will use to register components and trigger updates.
+ *
+ * This should be called once during application initialization, before any React components are loaded.
+ *
+ * @example
+ * // In your app entry point:
+ * import { registerReactRefresh } from '@ms-cloudpack/overlay';
+ * registerReactRefresh();
+ */
+export declare const registerReactRefresh: () => void;
+//# sourceMappingURL=registerReactRefresh.d.ts.map

package/lib/registerReactRefresh.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerReactRefresh.d.ts","sourceRoot":"","sources":["../src/registerReactRefresh.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,oBAAoB,QAAO,IAkEvC,CAAC"}

package/lib/registerReactRefresh.js

@@ -0,0 +1,79 @@
+import RefreshRuntime from 'react-refresh';
+/**
+ * Initializes the React Refresh runtime for hot module replacement (HMR).
+ *
+ * React Refresh enables fast refresh of React components without losing their state.
+ * This function sets up the necessary global hooks and functions that the bundler-transformed
+ * code will use to register components and trigger updates.
+ *
+ * This should be called once during application initialization, before any React components are loaded.
+ *
+ * @example
+ * // In your app entry point:
+ * import { registerReactRefresh } from '@ms-cloudpack/overlay';
+ * registerReactRefresh();
+ */
+export const registerReactRefresh = () => {
+    // Initialize React Refresh by injecting into React's internals
+    // This hooks into React's reconciler to enable hot reloading capabilities
+    // It modifies the global React DevTools hook to track component updates
+    RefreshRuntime.injectIntoGlobalHook(window);
+    // Set up the component registration function
+    // This function is called by bundler-injected code for every React component/hook
+    //
+    // Example of what the bundler transforms:
+    // Original code:
+    //   export const MyComponent = () => <div>Hello</div>
+    //
+    // Transformed code:
+    //   export const MyComponent = () => <div>Hello</div>
+    //   $RefreshReg$(MyComponent, 'MyComponent');
+    //
+    // The registration allows React Refresh to:
+    // - Track which components exist in the module
+    // - Match old and new versions of components during updates
+    // - Determine if a full reload is needed (e.g., if hooks changed)
+    window.$RefreshReg$ = (type, id) => {
+        // TODO: Make this fully qualified with id including package name to avoid collisions
+        // Currently, if two packages export a component with the same name, they could collide
+        // Example collision: '@pkg-a/MyComponent' and '@pkg-b/MyComponent' both register as 'MyComponent'
+        RefreshRuntime.register(type, id);
+    };
+    // Set up the signature function for tracking hook changes
+    // This is used to detect when hooks in a component have changed
+    //
+    // Example of what the bundler transforms:
+    // Original code:
+    //   const MyComponent = () => {
+    //     const [count, setCount] = useState(0);
+    //     return <div>{count}</div>
+    //   }
+    //
+    // Transformed code:
+    //   var _s = $RefreshSig$();
+    //   const MyComponent = () => {
+    //     _s();  // Signature call to track hooks
+    //     const [count, setCount] = useState(0);
+    //     return <div>{count}</div>
+    //   }
+    //   _s(MyComponent, "useState{count}");
+    //
+    // If hook signatures change (e.g., adding/removing useState), React Refresh will:
+    // - Detect the change via the signature mismatch
+    // - Force a full remount of the component (state will be lost)
+    // - Warn the developer about the limitation
+    window.$RefreshSig$ = () => {
+        return RefreshRuntime.createSignatureFunctionForTransform();
+    };
+    // Store the runtime globally for manual refresh triggering
+    // This is used by handlePackageUpdate.ts to call performReactRefresh()
+    // after new modules are imported
+    //
+    // The runtime provides:
+    // - performReactRefresh(): Triggers the actual component updates
+    // - register(): Called by $RefreshReg$ to track components
+    // - createSignatureFunctionForTransform(): Called by $RefreshSig$ to track hooks
+    window.$RefreshRuntime$ = RefreshRuntime;
+    console.log('[React Refresh] Runtime initialized');
+};
+//# sourceMappingURL=registerReactRefresh.js.map

package/lib/registerReactRefresh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerReactRefresh.js","sourceRoot":"","sources":["../src/registerReactRefresh.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,eAAe,CAAC;AAE3C;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAS,EAAE;IAC7C,+DAA+D;IAC/D,0EAA0E;IAC1E,wEAAwE;IACxE,cAAc,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC;IAE5C,6CAA6C;IAC7C,kFAAkF;IAClF,EAAE;IACF,0CAA0C;IAC1C,iBAAiB;IACjB,sDAAsD;IACtD,EAAE;IACF,oBAAoB;IACpB,sDAAsD;IACtD,8CAA8C;IAC9C,EAAE;IACF,4CAA4C;IAC5C,+CAA+C;IAC/C,4DAA4D;IAC5D,kEAAkE;IAClE,MAAM,CAAC,YAAY,GAAG,CAAC,IAAa,EAAE,EAAU,EAAE,EAAE;QAClD,qFAAqF;QACrF,uFAAuF;QACvF,kGAAkG;QAClG,cAAc,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IACpC,CAAC,CAAC;IAEF,0DAA0D;IAC1D,gEAAgE;IAChE,EAAE;IACF,0CAA0C;IAC1C,iBAAiB;IACjB,gCAAgC;IAChC,6CAA6C;IAC7C,gCAAgC;IAChC,MAAM;IACN,EAAE;IACF,oBAAoB;IACpB,6BAA6B;IAC7B,gCAAgC;IAChC,8CAA8C;IAC9C,6CAA6C;IAC7C,gCAAgC;IAChC,MAAM;IACN,wCAAwC;IACxC,EAAE;IACF,kFAAkF;IAClF,iDAAiD;IACjD,+DAA+D;IAC/D,4CAA4C;IAC5C,MAAM,CAAC,YAAY,GAAG,GAAG,EAAE;QACzB,OAAO,cAAc,CAAC,mCAAmC,EAAE,CAAC;IAC9D,CAAC,CAAC;IAEF,2DAA2D;IAC3D,uEAAuE;IACvE,iCAAiC;IACjC,EAAE;IACF,wBAAwB;IACxB,iEAAiE;IACjE,2DAA2D;IAC3D,iFAAiF;IACjF,MAAM,CAAC,gBAAgB,GAAG,cAAc,CAAC;IAEzC,OAAO,CAAC,GAAG,CAAC,qCAAqC,CAAC,CAAC;AACrD,CAAC,CAAC","sourcesContent":["import RefreshRuntime from 'react-refresh';\n\n/**\n * Initializes the React Refresh runtime for hot module replacement (HMR).\n *\n * React Refresh enables fast refresh of React components without losing their state.\n * This function sets up the necessary global hooks and functions that the bundler-transformed\n * code will use to register components and trigger updates.\n *\n * This should be called once during application initialization, before any React components are loaded.\n *\n * @example\n * // In your app entry point:\n * import { registerReactRefresh } from '@ms-cloudpack/overlay';\n * registerReactRefresh();\n */\nexport const registerReactRefresh = (): void => {\n  // Initialize React Refresh by injecting into React's internals\n  // This hooks into React's reconciler to enable hot reloading capabilities\n  // It modifies the global React DevTools hook to track component updates\n  RefreshRuntime.injectIntoGlobalHook(window);\n\n  // Set up the component registration function\n  // This function is called by bundler-injected code for every React component/hook\n  //\n  // Example of what the bundler transforms:\n  // Original code:\n  //   export const MyComponent = () => <div>Hello</div>\n  //\n  // Transformed code:\n  //   export const MyComponent = () => <div>Hello</div>\n  //   $RefreshReg$(MyComponent, 'MyComponent');\n  //\n  // The registration allows React Refresh to:\n  // - Track which components exist in the module\n  // - Match old and new versions of components during updates\n  // - Determine if a full reload is needed (e.g., if hooks changed)\n  window.$RefreshReg$ = (type: unknown, id: string) => {\n    // TODO: Make this fully qualified with id including package name to avoid collisions\n    // Currently, if two packages export a component with the same name, they could collide\n    // Example collision: '@pkg-a/MyComponent' and '@pkg-b/MyComponent' both register as 'MyComponent'\n    RefreshRuntime.register(type, id);\n  };\n\n  // Set up the signature function for tracking hook changes\n  // This is used to detect when hooks in a component have changed\n  //\n  // Example of what the bundler transforms:\n  // Original code:\n  //   const MyComponent = () => {\n  //     const [count, setCount] = useState(0);\n  //     return <div>{count}</div>\n  //   }\n  //\n  // Transformed code:\n  //   var _s = $RefreshSig$();\n  //   const MyComponent = () => {\n  //     _s();  // Signature call to track hooks\n  //     const [count, setCount] = useState(0);\n  //     return <div>{count}</div>\n  //   }\n  //   _s(MyComponent, \"useState{count}\");\n  //\n  // If hook signatures change (e.g., adding/removing useState), React Refresh will:\n  // - Detect the change via the signature mismatch\n  // - Force a full remount of the component (state will be lost)\n  // - Warn the developer about the limitation\n  window.$RefreshSig$ = () => {\n    return RefreshRuntime.createSignatureFunctionForTransform();\n  };\n\n  // Store the runtime globally for manual refresh triggering\n  // This is used by handlePackageUpdate.ts to call performReactRefresh()\n  // after new modules are imported\n  //\n  // The runtime provides:\n  // - performReactRefresh(): Triggers the actual component updates\n  // - register(): Called by $RefreshReg$ to track components\n  // - createSignatureFunctionForTransform(): Called by $RefreshSig$ to track hooks\n  window.$RefreshRuntime$ = RefreshRuntime;\n\n  console.log('[React Refresh] Runtime initialized');\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ms-cloudpack/overlay",
-  "version": "0.19.55",
+  "version": "0.19.57",
   "description": "The Cloudpack overlay UX",
   "license": "MIT",
   "type": "module",
@@ -29,16 +29,18 @@
     "prepack": "cp .npmignore dist/.npmignore"
   },
   "devDependencies": {
-    "@ms-cloudpack/api-server": "^0.65.13",
-    "@ms-cloudpack/common-types": "^0.33.1",
-    "@ms-cloudpack/common-types-browser": "^0.6.4",
+    "@ms-cloudpack/api-server": "^0.66.0",
+    "@ms-cloudpack/common-types": "^0.33.2",
+    "@ms-cloudpack/common-types-browser": "^0.6.5",
     "@ms-cloudpack/eslint-plugin-internal": "^0.0.1",
-    "@ms-cloudpack/path-string-parsing": "^1.2.7",
+    "@ms-cloudpack/path-string-parsing": "^1.3.0",
     "@ms-cloudpack/scripts": "^0.0.1",
+    "@types/react-refresh": "^0.14.0",
     "classnames": "^2.5.1",
     "preact": "^10.26.8",
     "react": "npm:@preact/compat@^18.0.0",
-    "react-focus-on": "^3.10.0"
+    "react-focus-on": "^3.10.0",
+    "react-refresh": "patch:react-refresh@npm%3A0.18.0#~/.yarn/patches/react-refresh-npm-0.18.0-5576c3f4a3.patch"
   },
   "files": [
     "lib/**/!(*.test.*)",