django-cfg 1.4.84__py3-none-any.whl → 1.4.85__py3-none-any.whl

django_cfg/templates/admin/index.html

@@ -2,6 +2,7 @@
 
 {% load static %}
 {% load unfold %}
+{% load django_cfg %}
 
 {% block extrahead %}
     {{ block.super }}
@@ -10,14 +11,23 @@
     <style>
         #nextjs-dashboard-iframe {
             width: 100%;
-            height: calc(100vh - 120px);
+            min-height: 600px;
+            height: auto;
             border: none;
             display: block;
+            visibility: hidden !important;
+            opacity: 0 !important;
+            transition: height 0.2s ease-in-out, opacity 0.3s ease-in-out;
+        }
+
+        #nextjs-dashboard-iframe.loaded {
+            visibility: visible !important;
+            opacity: 1 !important;
         }
 
         .iframe-container {
             position: relative;
-            background: #f9fafb;
+            background: transparent;
         }
 
         .iframe-loading {
@@ -63,16 +73,31 @@
 {% block content %}
     <!-- Main Container -->
     {% component "unfold/components/container.html" %}
+        {% if is_frontend_dev_mode %}
+        <!-- Development Mode Badge -->
+        <div class="bg-yellow-100 dark:bg-yellow-900 border-l-4 border-yellow-500 text-yellow-700 dark:text-yellow-300 p-4 mb-4" role="alert">
+            <div class="flex items-center">
+                <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
+                </svg>
+                <div>
+                    <p class="font-bold">Frontend Development Mode Active</p>
+                    <p class="text-sm">Loading Next.js from <code class="bg-yellow-200 dark:bg-yellow-800 px-1 rounded">{% nextjs_admin_url %}</code></p>
+                </div>
+            </div>
+        </div>
+        {% endif %}
+
         <!-- Next.js Dashboard iframe -->
         <div class="iframe-container">
             <div class="iframe-loading" id="iframe-loading">
                 <div class="spinner"></div>
-                <p>Loading Next.js Dashboard...</p>
+                <p id="loading-text">Loading Next.js Dashboard...</p>
             </div>
 
             <iframe
                 id="nextjs-dashboard-iframe"
-                src="/cfg/admin/private/"
+                src="{% nextjs_admin_url 'private' %}"
                 title="Next.js Dashboard"
                 sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-modals"
             ></iframe>
@@ -100,15 +125,222 @@
         (function() {
             const iframe = document.getElementById('nextjs-dashboard-iframe');
             const loading = document.getElementById('iframe-loading');
+            const loadingText = document.getElementById('loading-text');
+
+            // Log initial state
+            console.log('[Parent] 🎬 Initial iframe state:', {
+                visibility: window.getComputedStyle(iframe).visibility,
+                opacity: window.getComputedStyle(iframe).opacity,
+                hasLoadedClass: iframe.classList.contains('loaded')
+            });
+
+            // Detect iframe origin based on src
+            const iframeUrl = new URL(iframe.src);
+            const iframeOrigin = iframeUrl.origin;
+            const isDevMode = iframeOrigin !== window.location.origin;
+
+            // Debug logging (uncomment for debugging)
+            // console.log('[Parent] 🚀 Initializing iframe communication');
+            // console.log('[Parent] 📍 Parent origin:', window.location.origin);
+            // console.log('[Parent] 📍 iframe origin:', iframeOrigin);
+            // console.log('[Parent] 🔧 Dev mode:', isDevMode);
 
             iframe.addEventListener('load', function() {
-                loading.classList.add('hidden');
+                // console.log('[Parent] 🎬 iframe load event fired');
+
+                // Send initial data (theme + auth) to iframe after a small delay
+                // to ensure iframe is fully initialized
+                setTimeout(() => {
+                    // console.log('[Parent] ⏱️  Sending initial data after iframe load');
+                    sendDataToIframe();
+                }, 100);
             });
 
             // Hide loading after 5 seconds if iframe doesn't load
             setTimeout(() => {
                 loading.classList.add('hidden');
             }, 5000);
+
+            // Function to send theme and auth to iframe
+            function sendDataToIframe() {
+                // console.log('[Parent] 📤 sendDataToIframe() called');
+
+                if (!iframe || !iframe.contentWindow) {
+                    console.error('[Parent] iframe or contentWindow not available');
+                    return;
+                }
+
+                const htmlElement = document.documentElement;
+                const isDark = htmlElement.classList.contains('dark');
+                // console.log('[Parent] 🎨 HTML element classes:', htmlElement.className);
+                // console.log('[Parent] 🎨 isDark:', isDark);
+
+                // Get adminTheme value from Alpine.js data if available
+                let themeMode = 'auto';
+                // console.log('[Parent] 🔍 Checking Alpine.js:', {
+                //     hasAlpine: !!window.Alpine,
+                //     hasAlpineData: !!(window.Alpine && window.Alpine.$data)
+                // });
+
+                if (window.Alpine && window.Alpine.$data) {
+                    try {
+                        const alpineData = window.Alpine.$data(htmlElement);
+                        // console.log('[Parent] 🔍 Alpine data:', alpineData);
+                        if (alpineData && alpineData.adminTheme) {
+                            themeMode = alpineData.adminTheme;
+                            // console.log('[Parent] ✅ Got adminTheme from Alpine:', themeMode);
+                        }
+                    } catch (e) {
+                        console.warn('[Parent] Failed to get Alpine data:', e);
+                    }
+                }
+
+                // Get JWT tokens from localStorage (Django injected them)
+                const authToken = localStorage.getItem('auth_token');
+                const refreshToken = localStorage.getItem('refresh_token');
+                // console.log('[Parent] 🔑 Tokens in localStorage:', {
+                //     hasAuthToken: !!authToken,
+                //     hasRefreshToken: !!refreshToken,
+                //     authTokenLength: authToken ? authToken.length : 0
+                // });
+
+                // Send theme
+                const themeMessage = {
+                    type: 'parent-theme',
+                    data: {
+                        theme: isDark ? 'dark' : 'light',
+                        themeMode: themeMode
+                    }
+                };
+                // console.log('[Parent] 📨 Sending theme message:', themeMessage);
+
+                try {
+                    iframe.contentWindow.postMessage(themeMessage, iframeOrigin);
+                    // console.log('[Parent] ✅ Theme message sent successfully to', iframeOrigin);
+                } catch (e) {
+                    console.error('[Parent] Failed to send theme message:', e);
+                }
+
+                // Send auth tokens if available
+                if (authToken) {
+                    const authMessage = {
+                        type: 'parent-auth',
+                        data: {
+                            authToken: authToken,
+                            refreshToken: refreshToken
+                        }
+                    };
+                    // console.log('[Parent] 📨 Sending auth message:', {
+                    //     type: authMessage.type,
+                    //     hasAuthToken: !!authMessage.data.authToken,
+                    //     hasRefreshToken: !!authMessage.data.refreshToken
+                    // });
+
+                    try {
+                        iframe.contentWindow.postMessage(authMessage, iframeOrigin);
+                        // console.log('[Parent] ✅ Auth message sent successfully to', iframeOrigin);
+                    } catch (e) {
+                        console.error('[Parent] Failed to send auth message:', e);
+                    }
+                }
+                // else {
+                //     console.warn('[Parent] ⚠️  No auth token found, skipping auth message');
+                // }
+            }
+
+            // Watch for theme changes on HTML element
+            // console.log('[Parent] 👀 Setting up MutationObserver for theme changes');
+            const observer = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                        // console.log('[Parent] 🔄 HTML class changed, sending updated theme');
+                        sendDataToIframe();
+                    }
+                });
+            });
+
+            observer.observe(document.documentElement, {
+                attributes: true,
+                attributeFilter: ['class']
+            });
+            // console.log('[Parent] ✅ MutationObserver active');
+
+            // Listen for messages from iframe
+            // console.log('[Parent] 👂 Setting up message listener for iframe');
+            window.addEventListener('message', (event) => {
+                // console.log('[Parent] 📨 Message received from iframe:', {
+                //     origin: event.origin,
+                //     expectedOrigin: iframeOrigin,
+                //     type: event.data?.type,
+                //     data: event.data?.data
+                // });
+
+                if (event.origin !== iframeOrigin) {
+                    // console.log('[Parent] ⚠️  Message from unexpected origin, ignoring');
+                    return;
+                }
+
+                const { type, data } = event.data || {};
+
+                switch (type) {
+                    case 'iframe-ready':
+                        // console.log('[Parent] ✅ iframe-ready received:', data);
+                        // Send data immediately when iframe is ready
+                        // console.log('[Parent] 📤 Responding to iframe-ready by sending data');
+                        sendDataToIframe();
+                        break;
+
+                    case 'iframe-auth-status':
+                        // iframe sent auth status update
+                        console.log('[Parent] 🔐 Auth status received:', data);
+                        console.log('[Parent] 📊 Current iframe state BEFORE:', {
+                            visibility: window.getComputedStyle(iframe).visibility,
+                            opacity: window.getComputedStyle(iframe).opacity,
+                            hasLoadedClass: iframe.classList.contains('loaded')
+                        });
+
+                        if (data?.isAuthenticated && !data?.isLoading) {
+                            // User is authenticated, show iframe
+                            console.log('[Parent] ✅ Adding .loaded class');
+                            loading.classList.add('hidden');
+                            iframe.classList.add('loaded');
+
+                            setTimeout(() => {
+                                console.log('[Parent] 📊 iframe state AFTER .loaded:', {
+                                    visibility: window.getComputedStyle(iframe).visibility,
+                                    opacity: window.getComputedStyle(iframe).opacity,
+                                    hasLoadedClass: iframe.classList.contains('loaded')
+                                });
+                            }, 100);
+                        } else if (data?.isLoading) {
+                            // Still loading
+                            console.log('[Parent] ⏳ Auth loading...');
+                            loadingText.textContent = 'Loading authentication...';
+                        } else {
+                            // Not authenticated
+                            console.log('[Parent] ⚠️  Not authenticated');
+                            loadingText.textContent = 'Waiting for authentication...';
+                        }
+                        break;
+                    case 'iframe-resize':
+                        // Update iframe height based on content (both increase and decrease)
+                        if (data?.height && typeof data.height === 'number') {
+                            // Add padding to avoid scroll bars (50px buffer for safety)
+                            const newHeight = Math.max(600, data.height + 50); // Min 600px
+                            iframe.style.height = newHeight + 'px';
+                        }
+                        break;
+                    case 'iframe-navigation':
+                        // console.log('[Parent] 🧭 iframe navigated to:', data.path);
+                        break;
+                    default:
+                        // if (type) {
+                        //     console.log('[Parent] ℹ️  Unknown message type:', type);
+                        // }
+                        break;
+                }
+            });
+            // console.log('[Parent] ✅ Message listener active');
         })();
     </script>
 {% endblock %}

django_cfg/templates/admin/sections/commands_section.html

@@ -0,0 +1,5 @@
+{% comment %}
+Commands Section - Legacy Template
+Dashboard is now rendered by Next.js in the iframe.
+{% endcomment %}
+<div class="hidden"></div>

django_cfg/templates/admin/sections/documentation_section.html

@@ -0,0 +1,5 @@
+{% comment %}
+Documentation Section - Legacy Template
+Dashboard is now rendered by Next.js in the iframe.
+{% endcomment %}
+<div class="hidden"></div>

django_cfg/templates/admin/sections/overview_section.html

@@ -0,0 +1,5 @@
+{% comment %}
+Overview Section - Legacy Template
+Dashboard is now rendered by Next.js in the iframe.
+{% endcomment %}
+<div class="hidden"></div>

django_cfg/templates/admin/sections/stats_section.html

@@ -0,0 +1,5 @@
+{% comment %}
+Stats Section - Legacy Template
+Dashboard is now rendered by Next.js in the iframe.
+{% endcomment %}
+<div class="hidden"></div>

django_cfg/templates/admin/sections/system_section.html

@@ -0,0 +1,5 @@
+{% comment %}
+System Section - Legacy Template
+Dashboard is now rendered by Next.js in the iframe.
+{% endcomment %}
+<div class="hidden"></div>

django_cfg/templates/admin/sections/widgets_section.html

@@ -0,0 +1,11 @@
+{% comment %}
+Widgets Section - Legacy Template
+This template is kept for backward compatibility with django_dashboard callbacks.
+The actual dashboard is now rendered by Next.js in the iframe.
+{% endcomment %}
+
+<!-- Empty section - widgets are rendered in Next.js iframe -->
+<div class="hidden">
+    <!-- This section is intentionally empty -->
+    <!-- Dashboard widgets are now rendered by Next.js Admin Panel -->
+</div>

django_cfg/templates/unfold/layouts/skeleton.html

@@ -0,0 +1,27 @@
+{% extends "unfold/layouts/skeleton.html" %}
+
+{% block extrastyle %}
+{{ block.super }}
+<style id="django-cfg-theme-sync">
+/* ============================================== */
+/* Django CFG - Force Color Variables            */
+/* Ensures COLORS from get_color_scheme() apply  */
+/* ============================================== */
+
+/*
+ * NOTE: Colors are already defined via UNFOLD['COLORS'] in:
+ * django_cfg/modules/django_unfold/models/config.py:get_color_scheme()
+ *
+ * This CSS just ensures Tailwind classes use those variables correctly.
+ */
+
+/* Ensure color-scheme is set for proper dark mode rendering */
+html.dark {
+  color-scheme: dark;
+}
+
+html:not(.dark) {
+  color-scheme: light;
+}
+</style>
+{% endblock %}

django_cfg/templatetags/django_cfg.py

@@ -4,6 +4,7 @@ Django-CFG Template Tags
 Provides template tags for accessing django-cfg configuration constants.
 """
 
+import os
 from django import template
 from django.utils.safestring import mark_safe
 from rest_framework_simplejwt.tokens import RefreshToken
@@ -134,3 +135,55 @@ def inject_jwt_tokens_script(context):
 }})();
 </script>"""
     return mark_safe(script)
+
+
+@register.simple_tag
+def nextjs_admin_url(path=''):
+    """
+    Get the URL for Next.js Admin Panel.
+
+    In development mode (when DJANGO_CFG_FRONTEND_DEV_MODE=true):
+        Returns http://localhost:3000/{path}
+
+    In production mode:
+        Returns /cfg/admin/{path}
+
+    Usage in template:
+        {% load django_cfg %}
+        <iframe src="{% nextjs_admin_url 'private' %}"></iframe>
+
+    Environment variable:
+        DJANGO_CFG_FRONTEND_DEV_MODE=true    # Enable dev mode
+        DJANGO_CFG_FRONTEND_DEV_PORT=3000    # Custom dev port (default: 3000)
+    """
+    # Check if frontend dev mode is enabled
+    is_dev_mode = os.environ.get('DJANGO_CFG_FRONTEND_DEV_MODE', '').lower() in ('true', '1', 'yes')
+
+    # Normalize path - ensure trailing slash for Django static view
+    if path and not path.endswith('/'):
+        path = f'{path}/'
+
+    if is_dev_mode:
+        # Development mode: use Next.js dev server
+        dev_port = os.environ.get('DJANGO_CFG_FRONTEND_DEV_PORT', '3000')
+        base_url = f'http://localhost:{dev_port}'
+        return f'{base_url}/{path}' if path else base_url
+    else:
+        # Production mode: use Django static files
+        return f'/cfg/admin/{path}' if path else '/cfg/admin/'
+
+
+@register.simple_tag
+def is_frontend_dev_mode():
+    """
+    Check if frontend is in development mode.
+
+    Returns True if DJANGO_CFG_FRONTEND_DEV_MODE environment variable is set to true.
+
+    Usage in template:
+        {% load django_cfg %}
+        {% if is_frontend_dev_mode %}
+            <div class="dev-badge">Dev Mode</div>
+        {% endif %}
+    """
+    return os.environ.get('DJANGO_CFG_FRONTEND_DEV_MODE', '').lower() in ('true', '1', 'yes')

{django_cfg-1.4.84.dist-info → django_cfg-1.4.85.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: django-cfg
-Version: 1.4.84
+Version: 1.4.85
 Summary: Django AI framework with built-in agents, type-safe Pydantic v2 configuration, and 8 enterprise apps. Replace settings.py, validate at startup, 90% less code. Production-ready AI workflows for Django.
 Project-URL: Homepage, https://djangocfg.com
 Project-URL: Documentation, https://djangocfg.com