@djangocfg/layouts 1.2.14 → 1.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.2.14",
+  "version": "1.2.16",
   "description": "Layout system and components for Unrealon applications",
   "author": {
     "name": "DjangoCFG",
@@ -53,9 +53,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.2.14",
-    "@djangocfg/og-image": "^1.2.14",
-    "@djangocfg/ui": "^1.2.14",
+    "@djangocfg/api": "^1.2.16",
+    "@djangocfg/og-image": "^1.2.16",
+    "@djangocfg/ui": "^1.2.16",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.468.0",
@@ -76,7 +76,7 @@
     "vidstack": "0.6.15"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.2.14",
+    "@djangocfg/typescript-config": "^1.2.16",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/layouts/AppLayout/components/PackageVersions/packageVersions.config.ts

@@ -16,36 +16,36 @@ export interface PackageInfo {
 /**
  * Package versions registry
  * Auto-synced from package.json files
- * Last updated: 2025-10-29T12:42:02.313Z
+ * Last updated: 2025-10-30T11:41:48.345Z
  */
 const PACKAGE_VERSIONS: PackageInfo[] = [
   {
     "name": "@djangocfg/ui",
-    "version": "1.2.14"
+    "version": "1.2.16"
   },
   {
     "name": "@djangocfg/api",
-    "version": "1.2.14"
+    "version": "1.2.16"
   },
   {
     "name": "@djangocfg/layouts",
-    "version": "1.2.14"
+    "version": "1.2.16"
   },
   {
     "name": "@djangocfg/markdown",
-    "version": "1.2.14"
+    "version": "1.2.16"
   },
   {
     "name": "@djangocfg/og-image",
-    "version": "1.2.14"
+    "version": "1.2.16"
   },
   {
     "name": "@djangocfg/eslint-config",
-    "version": "1.2.14"
+    "version": "1.2.16"
   },
   {
     "name": "@djangocfg/typescript-config",
-    "version": "1.2.14"
+    "version": "1.2.16"
   }
 ];
 

package/src/layouts/AppLayout/layouts/AdminLayout/README.md

@@ -201,9 +201,9 @@ const {
 | Message Type | Data | Description |
 |-------------|------|-------------|
 | `iframe-ready` | `{ url, referrer }` | iframe loaded successfully |
-| `iframe-auth-status` | `{ isAuthenticated, isLoading, hasUser }` | Auth status update |
-| `iframe-resize` | `{ height }` | Content height changed |
-| `iframe-navigation` | `{ path, route }` | User navigated to new page |
+| `iframe-auth-status` | `{ isAuthenticated, isLoading, hasUser }` | Auth status update (sent on auth state change) |
+| `iframe-resize` | `{ height }` | Content height changed (sent on ResizeObserver trigger) |
+| `iframe-navigation` | `{ path }` | User navigated to new page (sent via Next.js Router.events) |
 
 ## Advanced Usage
 
@@ -278,6 +278,26 @@ import { ParentSync } from '@djangocfg/layouts';
 </AuthProvider>
 ```
 
+**What ParentSync does:**
+
+1. **Theme Sync** (Parent → iframe): Receives theme updates from Django Unfold and applies them
+2. **Auth Status Sync** (iframe → Parent): Sends authentication status when it changes
+3. **Auto Resize** (iframe → Parent): Sends content height for iframe resizing
+4. **Navigation Tracking** (iframe → Parent): Sends route changes for "Open in New Window" button
+
+**Navigation Tracking:**
+ParentSync automatically tracks route changes using Next.js Router and sends them to the parent window:
+
+```typescript
+// Automatically sent on every route change
+window.parent.postMessage({
+  type: 'iframe-navigation',
+  data: { path: '/admin/stocks' }
+}, '*');
+```
+
+This enables the "Open in New Window" button in the Django admin to open the exact page the user is currently viewing, not just the home page.
+
 ## Security Considerations
 
 - All postMessage communications validate origins

package/src/layouts/AppLayout/layouts/AdminLayout/components/ParentSync.tsx

@@ -122,23 +122,60 @@ function ParentSyncClient() {
     // Observe body element for size changes
     resizeObserver.observe(document.body);
 
-    // Also observe on route changes (for Next.js)
-    const handleRouteChange = () => {
-      // Delay to allow content to render
-      setTimeout(sendHeight, 100);
+    // Cleanup
+    return () => {
+      resizeObserver.disconnect();
     };
+  }, [isEmbedded, isMounted]);
 
-    // Listen for Next.js router events if available
-    if (typeof window !== 'undefined') {
-      window.addEventListener('popstate', handleRouteChange);
+  // 4. Send navigation events to parent (for "Open in New Window" button)
+  useEffect(() => {
+    // Only send if embedded and mounted
+    if (!isEmbedded || !isMounted) {
+      return;
     }
 
-    return () => {
-      resizeObserver.disconnect();
-      if (typeof window !== 'undefined') {
-        window.removeEventListener('popstate', handleRouteChange);
-      }
-    };
+    // Import Next.js router dynamically
+    import('next/router').then(({ default: Router }) => {
+      const handleRouteChange = (url: string) => {
+        // console.log('[ParentSync] 🔗 Route changed:', url);
+
+        try {
+          window.parent.postMessage({
+            type: 'iframe-navigation',
+            data: { path: url }
+          }, '*');
+        } catch (e) {
+          console.error('[ParentSync] ❌ Failed to send navigation event:', e);
+        }
+
+        // Also send height update after route change
+        setTimeout(() => {
+          const height = document.documentElement.scrollHeight;
+          try {
+            window.parent.postMessage({
+              type: 'iframe-resize',
+              data: { height }
+            }, '*');
+          } catch (e) {
+            console.error('[ParentSync] ❌ Failed to send height:', e);
+          }
+        }, 100);
+      };
+
+      // Listen to Next.js router events
+      Router.events.on('routeChangeComplete', handleRouteChange);
+
+      // Send initial route
+      handleRouteChange(Router.asPath);
+
+      // Cleanup
+      return () => {
+        Router.events.off('routeChangeComplete', handleRouteChange);
+      };
+    }).catch(err => {
+      console.warn('[ParentSync] Failed to load next/router:', err);
+    });
   }, [isEmbedded, isMounted]);
 
   // This component doesn't render anything