PyPI - django-cfg - Versions diffs - 1.3.11__py3-none-any.whl → 1.4.0__py3-none-any.whl - Mend

django-cfg 1.3.11py3-none-any.whl → 1.4.0py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (439) hide show

django_cfg/modules/django_drf_theme/templates/rest_framework/tailwind/base.html ADDED Viewed

@@ -0,0 +1,938 @@
+{% load static rest_framework tailwind_tags %}
+<!DOCTYPE html>
+<html lang="en" class="{{ html_class }}" x-data="drfApp()" x-init="init()" @keydown.window="handleKeyboard($event)">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="robots" content="NONE,NOARCHIVE">
+    <title>{% if name %}{{ name }} – {% endif %}{{ project_name|default:"API" }}</title>
+    {# CSRF Token for AJAX requests #}
+    {% csrf_token %}
+    <meta name="csrf-token" content="{{ csrf_token }}">
+    {# DRF CSRF data for ajax-form.js #}
+    <script id="drf_csrf" type="application/json">
+        {
+            "csrfToken": "{{ csrf_token }}",
+            "csrfHeaderName": "X-CSRFToken"
+        }
+    </script>
+    {# Apply theme immediately to prevent flash #}
+    <script>
+        (function() {
+            const theme = '{{ theme|default:"auto" }}';
+            const html = document.documentElement;
+            let isDark = false;
+            if (theme === 'dark') {
+                html.classList.add('dark');
+                isDark = true;
+            } else if (theme === 'light') {
+                html.classList.remove('dark');
+                isDark = false;
+            } else {
+                // Auto: use system preference
+                isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                if (isDark) {
+                    html.classList.add('dark');
+                } else {
+                    html.classList.remove('dark');
+                }
+            }
+            // Store for Prism.js theme switching
+            window.__drfThemeIsDark = isDark;
+        })();
+    </script>
+    {# Tailwind CSS #}
+    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,container-queries"></script>
+    {# Override Tailwind CDN's media-query dark mode with class-based dark mode #}
+    <style>
+        /* Force light mode colors when NOT in dark mode - override media queries */
+        html:not(.dark) body,
+        html:not(.dark) .dark\:bg-gray-900,
+        html:not(.dark) .dark\:bg-gray-800,
+        html:not(.dark) .dark\:bg-black {
+            background-color: rgb(249 250 251) !important; /* bg-gray-50 */
+        }
+        html:not(.dark) .dark\:bg-gray-700 {
+            background-color: rgb(243 244 246) !important; /* bg-gray-100 */
+        }
+        html:not(.dark) .dark\:text-gray-100,
+        html:not(.dark) .dark\:text-white,
+        html:not(.dark) .dark\:text-gray-300 {
+            color: rgb(17 24 39) !important; /* text-gray-900 */
+        }
+        html:not(.dark) .dark\:text-gray-400 {
+            color: rgb(75 85 99) !important; /* text-gray-600 */
+        }
+        html:not(.dark) .dark\:border-gray-700,
+        html:not(.dark) .dark\:border-gray-600 {
+            border-color: rgb(229 231 235) !important; /* border-gray-200 */
+        }
+        /* Enforce dark mode colors when IN dark mode */
+        html.dark body,
+        html.dark .dark\:bg-gray-900 {
+            background-color: rgb(17 24 39) !important;
+        }
+        html.dark .dark\:bg-gray-800 {
+            background-color: rgb(31 41 55) !important;
+        }
+        html.dark .dark\:bg-black {
+            background-color: rgb(0 0 0) !important;
+        }
+        html.dark .dark\:text-gray-100 {
+            color: rgb(243 244 246) !important;
+        }
+        html.dark .dark\:text-white {
+            color: rgb(255 255 255) !important;
+        }
+    </style>
+    {# Prism.js for syntax highlighting - loaded dynamically based on theme #}
+    <link rel="stylesheet" id="prism-light" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" disabled>
+    <link rel="stylesheet" id="prism-dark" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css" disabled>
+    <script>
+        // Enable the correct Prism theme immediately
+        if (window.__drfThemeIsDark) {
+            document.getElementById('prism-dark').disabled = false;
+        } else {
+            document.getElementById('prism-light').disabled = false;
+        }
+    </script>
+    {# Alpine.js for interactivity #}
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    {# Custom styles #}
+    <style>
+        /* Glass morphism */
+        .glass {
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+        }
+        .dark .glass {
+            background: rgba(17, 24, 39, 0.9);
+        }
+        /* Smooth transitions */
+        * {
+            transition-property: background-color, border-color, color, fill, stroke;
+            transition-duration: 200ms;
+            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            @apply bg-gray-100 dark:bg-gray-800;
+        }
+        ::-webkit-scrollbar-thumb {
+            @apply bg-gray-300 dark:bg-gray-600 rounded-full;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            @apply bg-gray-400 dark:bg-gray-500;
+        }
+        /* Shimmer animation for loading */
+        @keyframes shimmer {
+            0% { background-position: -1000px 0; }
+            100% { background-position: 1000px 0; }
+        }
+        .shimmer {
+            animation: shimmer 2s infinite;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+            background-size: 1000px 100%;
+        }
+        /* Pygments dark theme overrides */
+        .dark .highlight { background: #1f2937 !important; }
+        .dark .highlight .c { color: #6ee7b7; } /* Comment */
+        .dark .highlight .k { color: #c084fc; } /* Keyword */
+        .dark .highlight .o { color: #9ca3af; } /* Operator */
+        .dark .highlight .s { color: #fca5a5; } /* String */
+        .dark .highlight .na { color: #fca5a5; } /* Name.Attribute */
+        .dark .highlight .nb { color: #c084fc; } /* Name.Builtin */
+        .dark .highlight .nc { color: #60a5fa; } /* Name.Class */
+        .dark .highlight .nf { color: #34d399; } /* Name.Function */
+        .dark .highlight .nn { color: #60a5fa; } /* Name.Namespace */
+        .dark .highlight .nt { color: #34d399; } /* Name.Tag */
+        .dark .highlight .m,
+        .dark .highlight .mi,
+        .dark .highlight .mf { color: #fb923c; } /* Numbers */
+        /* Simple badges */
+        .badge {
+            display: inline-flex;
+            align-items: center;
+            padding: 0.125rem 0.625rem;
+            border-radius: 0.25rem;
+            font-size: 0.75rem;
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+        .badge-get {
+            background-color: #3b82f6;
+            color: white;
+        }
+        .badge-post {
+            background-color: #10b981;
+            color: white;
+        }
+        .badge-put {
+            background-color: #f97316;
+            color: white;
+        }
+        .badge-patch {
+            background-color: #a855f7;
+            color: white;
+        }
+        .badge-delete {
+            background-color: #ef4444;
+            color: white;
+        }
+        /* Status badges */
+        .status-success {
+            background-color: #dcfce7;
+            color: #166534;
+        }
+        .dark .status-success {
+            background-color: rgba(34, 197, 94, 0.3);
+            color: #86efac;
+        }
+        .status-info {
+            background-color: #dbeafe;
+            color: #1e40af;
+        }
+        .dark .status-info {
+            background-color: rgba(59, 130, 246, 0.3);
+            color: #93c5fd;
+        }
+        .status-warning {
+            background-color: #fef3c7;
+            color: #92400e;
+        }
+        .dark .status-warning {
+            background-color: rgba(234, 179, 8, 0.3);
+            color: #fde047;
+        }
+        .status-error {
+            background-color: #fee2e2;
+            color: #991b1b;
+        }
+        .dark .status-error {
+            background-color: rgba(239, 68, 68, 0.3);
+            color: #fca5a5;
+        }
+        /* Cards */
+        .card {
+            background-color: white;
+            border-radius: 0.5rem;
+            border: 1px solid #e5e7eb;
+            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+        }
+        .dark .card {
+            background-color: #1f2937;
+            border-color: #374151;
+        }
+        /* Buttons */
+        .btn-icon {
+            padding: 0.5rem;
+            border-radius: 0.5rem;
+        }
+        .btn-icon:hover {
+            background-color: #f3f4f6;
+        }
+        .dark .btn-icon:hover {
+            background-color: #374151;
+        }
+        /* Base HTML elements styling */
+        input[type="text"],
+        input[type="email"],
+        input[type="password"],
+        input[type="number"],
+        input[type="url"],
+        input[type="search"],
+        textarea,
+        select {
+            width: 100%;
+            padding: 0.5rem 0.75rem;
+            background-color: white;
+            border: 1px solid #d1d5db;
+            border-radius: 0.5rem;
+            color: #111827;
+        }
+        .dark input[type="text"],
+        .dark input[type="email"],
+        .dark input[type="password"],
+        .dark input[type="number"],
+        .dark input[type="url"],
+        .dark input[type="search"],
+        .dark textarea,
+        .dark select {
+            background-color: #1f2937;
+            border-color: #4b5563;
+            color: white;
+        }
+        input:focus,
+        textarea:focus,
+        select:focus {
+            outline: none;
+            ring: 2px;
+            ring-color: #3b82f6;
+            border-color: #3b82f6;
+        }
+        button[type="submit"],
+        .btn-primary {
+            padding: 0.5rem 1rem;
+            background-color: #2563eb;
+            color: white;
+            border-radius: 0.5rem;
+            font-weight: 500;
+        }
+        button[type="submit"]:hover,
+        .btn-primary:hover {
+            background-color: #1d4ed8;
+        }
+        .content a {
+            color: #2563eb;
+            text-decoration: underline;
+        }
+        .dark .content a {
+            color: #60a5fa;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+        th {
+            padding: 0.5rem 1rem;
+            background-color: #f3f4f6;
+            border: 1px solid #e5e7eb;
+            text-align: left;
+            font-weight: 500;
+        }
+        .dark th {
+            background-color: #1f2937;
+            border-color: #374151;
+        }
+        td {
+            padding: 0.5rem 1rem;
+            border: 1px solid #e5e7eb;
+        }
+        .dark td {
+            border-color: #374151;
+        }
+        pre {
+            background-color: #f3f4f6;
+            padding: 1rem;
+            border-radius: 0.5rem;
+            overflow-x: auto;
+        }
+        .dark pre {
+            background-color: #111827;
+        }
+        code {
+            background-color: #f3f4f6;
+            padding: 0.125rem 0.375rem;
+            border-radius: 0.25rem;
+            font-size: 0.875rem;
+            font-family: monospace;
+        }
+        .dark code {
+            background-color: #1f2937;
+        }
+        pre code {
+            background: transparent;
+            padding: 0;
+        }
+        h1, h2, h3, h4, h5, h6 {
+            font-weight: bold;
+            color: #111827;
+        }
+        .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
+            color: white;
+        }
+        h1 { font-size: 1.875rem; }
+        h2 { font-size: 1.5rem; }
+        h3 { font-size: 1.25rem; }
+        h4 { font-size: 1.125rem; }
+        label {
+            display: block;
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: #374151;
+            margin-bottom: 0.25rem;
+        }
+        .dark label {
+            color: #d1d5db;
+        }
+        .form-group {
+            margin-bottom: 1rem;
+        }
+        .alert {
+            padding: 1rem;
+            border-radius: 0.5rem;
+            border: 1px solid;
+        }
+        .alert-error {
+            background-color: #fef2f2;
+            border-color: #fecaca;
+            color: #991b1b;
+        }
+        .dark .alert-error {
+            background-color: rgba(239, 68, 68, 0.2);
+            border-color: #991b1b;
+            color: #fca5a5;
+        }
+        .alert-success {
+            background-color: #f0fdf4;
+            border-color: #bbf7d0;
+            color: #166534;
+        }
+        .dark .alert-success {
+            background-color: rgba(34, 197, 94, 0.2);
+            border-color: #166534;
+            color: #86efac;
+        }
+        .alert-info {
+            background-color: #eff6ff;
+            border-color: #bfdbfe;
+            color: #1e40af;
+        }
+        .dark .alert-info {
+            background-color: rgba(59, 130, 246, 0.2);
+            border-color: #1e40af;
+            color: #93c5fd;
+        }
+    </style>
+    {% if code_style %}<style>{{ code_style }}</style>{% endif %}
+</head>
+<body class="min-h-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
+    {# Glass morphism navbar #}
+    <nav class="sticky top-0 z-50 glass border-b border-gray-200/50 dark:border-gray-700/50 shadow-sm">
+        <div class="px-6 py-3">
+            <div class="flex items-center justify-between">
+                {# Left: Branding + HTTP Method Badge #}
+                <div class="flex items-center space-x-4">
+                    <a href="/" class="text-xl font-bold text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-all">
+                        {% block branding %}{{ project_name|default:"API" }}{% endblock %}
+                    </a>
+                    {% if request.method %}
+                        <span class="badge
+                                   {% if request.method == 'GET' %}badge-get
+                                   {% elif request.method == 'POST' %}badge-post
+                                   {% elif request.method == 'PUT' %}badge-put
+                                   {% elif request.method == 'PATCH' %}badge-patch
+                                   {% elif request.method == 'DELETE' %}badge-delete
+                                   {% else %}bg-gradient-to-r from-gray-500 to-gray-600 text-white{% endif %}">
+                            {{ request.method }}
+                        </span>
+                    {% endif %}
+                </div>
+                {# Right: Actions #}
+                <div class="flex items-center space-x-2">
+                    {# Command Palette Trigger #}
+                    <button @click="commandPaletteOpen = true"
+                            class="hidden md:flex items-center space-x-2 px-3 py-1.5 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-sm transition-all group">
+                        <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16l2.879-2.879m0 0a3 3 0 104.243-4.242 3 3 0 00-4.243 4.242zM21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                        </svg>
+                        <span class="text-gray-600 dark:text-gray-400">Search</span>
+                        <kbd class="px-2 py-0.5 text-xs bg-gray-200 dark:bg-gray-700 rounded">⌘K</kbd>
+                    </button>
+                    {# Theme Toggle #}
+                    <div class="relative" x-data="{ open: false }">
+                        <button @click="open = !open"
+                                class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
+                            <svg x-show="theme === 'light'" class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"/>
+                            </svg>
+                            <svg x-show="theme === 'dark'" class="w-5 h-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
+                                <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>
+                            </svg>
+                            <svg x-show="theme === 'auto'" class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
+                            </svg>
+                        </button>
+                        {# Theme dropdown #}
+                        <div x-show="open"
+                             @click.away="open = false"
+                             x-transition
+                             class="absolute right-0 mt-2 w-40 glass rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 py-1">
+                            <button @click="setTheme('light'); open = false"
+                                    class="flex items-center w-full px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800">
+                                <svg class="w-4 h-4 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
+                                </svg>
+                                Light
+                            </button>
+                            <button @click="setTheme('dark'); open = false"
+                                    class="flex items-center w-full px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800">
+                                <svg class="w-4 h-4 mr-2 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
+                                    <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>
+                                </svg>
+                                Dark
+                            </button>
+                            <button @click="setTheme('auto'); open = false"
+                                    class="flex items-center w-full px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800">
+                                <svg class="w-4 h-4 mr-2 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3"/>
+                                </svg>
+                                Auto
+                            </button>
+                        </div>
+                    </div>
+                    {# User Menu #}
+                    <div class="flex items-center space-x-3 pl-3 border-l border-gray-200 dark:border-gray-700">
+                        {% if user.is_authenticated %}
+                            <div class="flex items-center space-x-3">
+                                <div class="flex items-center space-x-2">
+                                    <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white font-semibold text-sm">
+                                        {{ user.username|first|upper }}
+                                    </div>
+                                    <span class="hidden md:block text-sm font-medium text-gray-900 dark:text-white">{{ user.username }}</span>
+                                </div>
+                                {% if api_settings.LOGOUT_URL %}
+                                <form action="{% url api_settings.LOGOUT_URL %}" method="post">
+                                    {% csrf_token %}
+                                    <button type="submit" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">
+                                        Logout
+                                    </button>
+                                </form>
+                                {% endif %}
+                            </div>
+                        {% else %}
+                            {% optional_login request %}
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+    {# Main Content #}
+    <main class="container mx-auto px-4 py-6 max-w-7xl">
+        {# Breadcrumbs with animation #}
+        {% if breadcrumblist %}
+            <nav class="mb-6 animate-fade-in">
+                <ol class="flex items-center space-x-2 text-sm">
+                    {% for breadcrumb_name, breadcrumb_url in breadcrumblist %}
+                        {% if not forloop.last %}
+                            <li class="flex items-center">
+                                <a href="{{ breadcrumb_url }}"
+                                   class="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:underline">
+                                    {{ breadcrumb_name }}
+                                </a>
+                                <svg class="w-4 h-4 mx-2 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+                                </svg>
+                            </li>
+                        {% else %}
+                            <li class="text-gray-900 dark:text-gray-100 font-medium">{{ breadcrumb_name }}</li>
+                        {% endif %}
+                    {% endfor %}
+                </ol>
+            </nav>
+        {% endif %}
+        {# Content Block #}
+        <div class="space-y-6">
+            {% block content %}{% endblock %}
+        </div>
+        {# Footer #}
+        {% load django_cfg %}
+        <footer class="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
+            <div class="text-center">
+                <p class="text-sm text-gray-600 dark:text-gray-400">
+                    Powered by
+                    <a href="{% lib_site_url %}"
+                       class="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium transition-colors"
+                       target="_blank" rel="noopener noreferrer">
+                        {% lib_name %}
+                    </a>
+                </p>
+                <p class="mt-2 text-xs text-gray-500 dark:text-gray-500">
+                    {% lib_subtitle %}
+                </p>
+            </div>
+        </footer>
+    </main>
+    {# Command Palette #}
+    <div x-show="commandPaletteOpen"
+         x-transition.opacity
+         @click="commandPaletteOpen = false"
+         class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50">
+        <div @click.stop
+             class="fixed top-20 left-1/2 -translate-x-1/2 w-full max-w-2xl glass rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+            {# Search Input #}
+            <div class="p-4 border-b border-gray-200 dark:border-gray-700">
+                <div class="relative">
+                    <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+                    </svg>
+                    <input type="text"
+                           x-model="commandSearch"
+                           @keydown.escape="commandPaletteOpen = false"
+                           placeholder="Search actions, endpoints..."
+                           class="w-full pl-10 pr-4 py-3 bg-transparent border-0 focus:outline-none text-lg">
+                </div>
+            </div>
+            {# Quick Actions #}
+            <div class="p-2 max-h-96 overflow-y-auto">
+                <div class="space-y-1">
+                    <button @click="copyCurrentURL(); commandPaletteOpen = false"
+                            class="w-full flex items-center px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-left group">
+                        <svg class="w-5 h-5 mr-3 text-gray-400 group-hover:text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
+                        </svg>
+                        <div class="flex-1">
+                            <div class="font-medium">Copy Current URL</div>
+                            <div class="text-sm text-gray-500">Copy this endpoint URL to clipboard</div>
+                        </div>
+                        <kbd class="px-2 py-1 text-xs bg-gray-200 dark:bg-gray-700 rounded">⌘C</kbd>
+                    </button>
+                    <button @click="toggleTheme(); commandPaletteOpen = false"
+                            class="w-full flex items-center px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-left group">
+                        <svg class="w-5 h-5 mr-3 text-gray-400 group-hover:text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
+                        </svg>
+                        <div class="flex-1">
+                            <div class="font-medium">Toggle Theme</div>
+                            <div class="text-sm text-gray-500">Switch between light and dark mode</div>
+                        </div>
+                        <kbd class="px-2 py-1 text-xs bg-gray-200 dark:bg-gray-700 rounded">⌘D</kbd>
+                    </button>
+                    <button @click="showShortcuts(); commandPaletteOpen = false"
+                            class="w-full flex items-center px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-left group">
+                        <svg class="w-5 h-5 mr-3 text-gray-400 group-hover:text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                        </svg>
+                        <div class="flex-1">
+                            <div class="font-medium">Keyboard Shortcuts</div>
+                            <div class="text-sm text-gray-500">View all available shortcuts</div>
+                        </div>
+                        <kbd class="px-2 py-1 text-xs bg-gray-200 dark:bg-gray-700 rounded">?</kbd>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    {# Toast Notifications #}
+    <div class="fixed bottom-4 right-4 z-50 space-y-2">
+        <template x-for="(toast, index) in toasts" :key="index">
+            <div x-show="toast.show"
+                 x-transition:enter="transition ease-out duration-300"
+                 x-transition:enter-start="opacity-0 translate-y-4"
+                 x-transition:enter-end="opacity-100 translate-y-0"
+                 x-transition:leave="transition ease-in duration-200"
+                 x-transition:leave-start="opacity-100 translate-y-0"
+                 x-transition:leave-end="opacity-0 translate-y-4"
+                 class="glass rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 p-4 flex items-center space-x-3 max-w-sm">
+                <svg x-show="toast.type === 'success'" class="w-5 h-5 text-green-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
+                </svg>
+                <svg x-show="toast.type === 'error'" class="w-5 h-5 text-red-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
+                </svg>
+                <p class="flex-1 text-sm" x-text="toast.message"></p>
+                <button @click="removeToast(index)" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
+                    </svg>
+                </button>
+            </div>
+        </template>
+    </div>
+    {# Scripts #}
+    {# jQuery required for DRF ajax-form.js #}
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-json.min.js"></script>
+    <script src="{% static 'rest_framework/js/csrf.js' %}"></script>
+    <script src="{% static 'rest_framework/js/ajax-form.js' %}"></script>
+    <script>
+        function drfApp() {
+            return {
+                theme: '{{ theme|default:"auto" }}',
+                commandPaletteOpen: false,
+                commandSearch: '',
+                toasts: [],
+                init() {
+                    this.applyTheme();
+                    this.listenForSystemTheme();
+                },
+                applyTheme() {
+                    let isDark = false;
+                    if (this.theme === 'dark') {
+                        document.documentElement.classList.add('dark');
+                        isDark = true;
+                    } else if (this.theme === 'light') {
+                        document.documentElement.classList.remove('dark');
+                        isDark = false;
+                    } else {
+                        // Auto: use system preference
+                        isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                        if (isDark) {
+                            document.documentElement.classList.add('dark');
+                        } else {
+                            document.documentElement.classList.remove('dark');
+                        }
+                    }
+                    // Switch Prism.js theme
+                    const prismLight = document.getElementById('prism-light');
+                    const prismDark = document.getElementById('prism-dark');
+                    if (prismLight && prismDark) {
+                        prismLight.disabled = isDark;
+                        prismDark.disabled = !isDark;
+                    }
+                },
+                setTheme(newTheme) {
+                    this.theme = newTheme;
+                    this.applyTheme();
+                    document.cookie = `theme=${newTheme}; path=/; max-age=31536000; SameSite=Lax`;
+                    this.showToast(`Theme changed to ${newTheme}`, 'success');
+                },
+                toggleTheme() {
+                    const themes = ['light', 'dark', 'auto'];
+                    const currentIndex = themes.indexOf(this.theme);
+                    const nextTheme = themes[(currentIndex + 1) % themes.length];
+                    this.setTheme(nextTheme);
+                },
+                listenForSystemTheme() {
+                    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+                        if (this.theme === 'auto') {
+                            this.applyTheme();
+                        }
+                    });
+                },
+                handleKeyboard(event) {
+                    // Command Palette (Cmd/Ctrl + K)
+                    if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
+                        event.preventDefault();
+                        this.commandPaletteOpen = !this.commandPaletteOpen;
+                    }
+                    // Toggle theme (Cmd/Ctrl + D)
+                    if ((event.metaKey || event.ctrlKey) && event.key === 'd') {
+                        event.preventDefault();
+                        this.toggleTheme();
+                    }
+                    // Copy URL (Cmd/Ctrl + C when not in input and no text selected)
+                    if ((event.metaKey || event.ctrlKey) && event.key === 'c' && !['INPUT', 'TEXTAREA'].includes(event.target.tagName)) {
+                        // Only intercept if no text is selected
+                        const selection = window.getSelection();
+                        if (!selection || selection.toString().length === 0) {
+                            event.preventDefault();
+                            this.copyCurrentURL();
+                        }
+                    }
+                    // Show shortcuts (?)
+                    if (event.key === '?' && !['INPUT', 'TEXTAREA'].includes(event.target.tagName)) {
+                        event.preventDefault();
+                        this.showShortcuts();
+                    }
+                    // Close command palette (Escape)
+                    if (event.key === 'Escape') {
+                        this.commandPaletteOpen = false;
+                    }
+                },
+                copyCurrentURL() {
+                    navigator.clipboard.writeText(window.location.href).then(() => {
+                        this.showToast('URL copied to clipboard!', 'success');
+                    }).catch(() => {
+                        this.showToast('Failed to copy URL', 'error');
+                    });
+                },
+                showShortcuts() {
+                    const shortcuts = `
+Keyboard Shortcuts:
+⌘K or Ctrl+K - Open command palette
+⌘D or Ctrl+D - Toggle theme
+⌘C or Ctrl+C - Copy current URL
+? - Show this help
+Esc - Close dialogs
+                    `.trim();
+                    alert(shortcuts);
+                },
+                showToast(message, type = 'success') {
+                    const toast = { message, type, show: true };
+                    this.toasts.push(toast);
+                    setTimeout(() => {
+                        const index = this.toasts.indexOf(toast);
+                        if (index > -1) {
+                            this.toasts[index].show = false;
+                            setTimeout(() => this.removeToast(index), 300);
+                        }
+                    }, 3000);
+                },
+                removeToast(index) {
+                    this.toasts.splice(index, 1);
+                }
+            }
+        }
+        // Global JSON rendering function
+        function renderJSON(data, level = 0) {
+            if (data === null) return '<span class="text-gray-500 dark:text-gray-400">null</span>';
+            if (data === undefined) return '<span class="text-gray-500 dark:text-gray-400">undefined</span>';
+            if (typeof data === 'boolean') return `<span class="text-purple-600 dark:text-purple-400">${data}</span>`;
+            if (typeof data === 'number') return `<span class="text-orange-600 dark:text-orange-400">${data}</span>`;
+            if (typeof data === 'string') return `<span class="text-green-600 dark:text-green-400">"${escapeHtml(data)}"</span>`;
+            const indent = '  '.repeat(level);
+            const childIndent = '  '.repeat(level + 1);
+            if (Array.isArray(data)) {
+                if (data.length === 0) return '<span class="text-gray-600 dark:text-gray-400">[]</span>';
+                const id = 'json-' + Math.random().toString(36).substr(2, 9);
+                let html = `<div class="json-node">
+                    <span class="json-toggle cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-700 px-1 rounded"
+                          onclick="this.dataset.expanded = this.dataset.expanded === 'true' ? 'false' : 'true';
+                                   this.textContent = this.dataset.expanded === 'true' ? '▼' : '▶';
+                                   document.getElementById('${id}').style.display = this.dataset.expanded === 'true' ? 'block' : 'none'"
+                          data-expanded="false">▶</span>
+                    <span class="text-gray-600 dark:text-gray-400">[</span>
+                    <span class="text-xs text-gray-500 dark:text-gray-500 ml-2">${data.length} items</span>
+                    <div id="${id}" class="json-content ml-4" style="display: none;">`;
+                data.forEach((item, i) => {
+                    html += `<div class="py-0.5">${childIndent}${renderJSON(item, level + 1)}${i < data.length - 1 ? '<span class="text-gray-600 dark:text-gray-400">,</span>' : ''}</div>`;
+                });
+                html += `</div>${indent}<span class="text-gray-600 dark:text-gray-400">]</span></div>`;
+                return html;
+            }
+            if (typeof data === 'object') {
+                const keys = Object.keys(data);
+                if (keys.length === 0) return '<span class="text-gray-600 dark:text-gray-400">{}</span>';
+                const id = 'json-' + Math.random().toString(36).substr(2, 9);
+                let html = `<div class="json-node">
+                    <span class="json-toggle cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-700 px-1 rounded"
+                          onclick="this.dataset.expanded = this.dataset.expanded === 'true' ? 'false' : 'true';
+                                   this.textContent = this.dataset.expanded === 'true' ? '▼' : '▶';
+                                   document.getElementById('${id}').style.display = this.dataset.expanded === 'true' ? 'block' : 'none'"
+                          data-expanded="false">▶</span>
+                    <span class="text-gray-600 dark:text-gray-400">{</span>
+                    <span class="text-xs text-gray-500 dark:text-gray-500 ml-2">${keys.length} keys</span>
+                    <div id="${id}" class="json-content ml-4" style="display: none;">`;
+                keys.forEach((key, i) => {
+                    html += `<div class="py-0.5">${childIndent}<span class="text-blue-600 dark:text-blue-400">"${escapeHtml(key)}"</span><span class="text-gray-600 dark:text-gray-400">: </span>${renderJSON(data[key], level + 1)}${i < keys.length - 1 ? '<span class="text-gray-600 dark:text-gray-400">,</span>' : ''}</div>`;
+                });
+                html += `</div>${indent}<span class="text-gray-600 dark:text-gray-400">}</span></div>`;
+                return html;
+            }
+            return String(data);
+        }
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+    </script>
+    {% if django_browser_reload_enabled %}
+        <script src="{% static 'django_browser_reload/reload-listener.js' %}"></script>
+    {% endif %}
+</body>
+</html>

django-cfg 1.3.11__py3-none-any.whl → 1.4.0__py3-none-any.whl

django-cfg 1.3.11py3-none-any.whl → 1.4.0py3-none-any.whl