django-cfg 1.4.46__py3-none-any.whl → 1.5.181__py3-none-any.whl

django_cfg/modules/django_admin/templates/django_admin/documentation_modal.html

@@ -0,0 +1,317 @@
+{% load static %}
+{# Documentation Modal with Tree Navigation - Alpine.js powered #}
+
+<div x-data="docModal()" x-init="init()">
+    {# Floating Action Button (FAB) with Badge #}
+    <div style="position: fixed !important; bottom: 1.5rem !important; right: 1.5rem !important; z-index: 49 !important;">
+        <button
+            @click="open = true"
+            type="button"
+            class="flex items-center justify-center bg-primary-600 hover:bg-primary-700 text-white rounded-full transition-all duration-200 shadow-lg hover:shadow-xl hover:scale-110"
+            style="width: 3.5rem !important; height: 3.5rem !important; padding: 0 !important; border: none !important; outline: none !important; position: relative !important;"
+            title="{{ documentation_config.title }}{% if documentation_sections_count %} ({{ documentation_sections_count }} section{{ documentation_sections_count|pluralize }}){% endif %}"
+        >
+            <span class="material-symbols-outlined" style="font-size: 1.5rem !important;">description</span>
+        </button>
+
+        {# Badge with count #}
+        {% if documentation_sections_count %}
+        <span
+            class="flex items-center justify-center text-white text-xs font-bold rounded-full"
+            style="position: absolute !important; top: -0.25rem !important; right: -0.25rem !important; min-width: 1.25rem !important; height: 1.25rem !important; padding: 0 0.25rem !important; background-color: #ef4444 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important; pointer-events: none !important;"
+        >
+            {{ documentation_sections_count }}
+        </span>
+        {% endif %}
+    </div>
+
+    {# Modal Overlay & Container - FULLSCREEN #}
+    <div
+        x-show="open"
+        x-cloak
+        class="fixed inset-0 z-[1000] bg-base-900/80 backdrop-blur-sm"
+        @click.self="open = false"
+        x-transition:enter="transition ease-out duration-200"
+        x-transition:enter-start="opacity-0"
+        x-transition:enter-end="opacity-100"
+        x-transition:leave="transition ease-in duration-150"
+        x-transition:leave-start="opacity-100"
+        x-transition:leave-end="opacity-0"
+    >
+        {# Modal Window - FULLSCREEN #}
+        <div
+            class="bg-white dark:bg-base-900 shadow-2xl"
+            style="width: 100vw; height: 100vh; display: flex; flex-direction: column; overflow: hidden;"
+            @click.stop
+            x-transition:enter="transition ease-out duration-200"
+            x-transition:enter-start="opacity-0"
+            x-transition:enter-end="opacity-100"
+            x-transition:leave="transition ease-in duration-150"
+            x-transition:leave-start="opacity-100"
+            x-transition:leave-end="opacity-0"
+        >
+            {# Header (Fixed) #}
+            <div class="flex items-center justify-between px-6 py-4 border-b border-base-200 dark:border-base-800 bg-base-50 dark:bg-base-950" style="flex-shrink: 0;">
+                <div class="flex items-center gap-3">
+                    <span class="material-symbols-outlined text-2xl text-primary-600 dark:text-primary-400">description</span>
+                    <h2 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark">
+                        {{ documentation_config.title }}
+                    </h2>
+                </div>
+                <button
+                    @click="open = false"
+                    class="p-2 rounded-default hover:bg-base-100 dark:hover:bg-base-800 transition-colors duration-150"
+                >
+                    <span class="material-symbols-outlined text-xl text-font-default-light dark:text-font-default-dark">close</span>
+                </button>
+            </div>
+
+            {# Content Area: Sidebar + Main Content - FULL INLINE STYLES #}
+            <div style="display: flex; flex: 1 1 0%; min-height: 0;">
+                {# Sidebar - Tree Navigation #}
+                <div class="border-r border-base-200 dark:border-base-800 bg-base-50 dark:bg-base-950" style="width: 320px; display: flex; flex-direction: column;">
+                    {# Search Bar (Fixed) #}
+                    <div class="p-4 border-b border-base-200 dark:border-base-800" style="flex-shrink: 0;">
+                        <div class="relative">
+                            <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-font-subtle-light dark:text-font-subtle-dark text-base pointer-events-none">
+                                search
+                            </span>
+                            <input
+                                type="text"
+                                x-model="searchQuery"
+                                @input="filterTree()"
+                                placeholder="Search documentation..."
+                                class="w-full pl-10 pr-4 py-2 bg-white dark:bg-base-900 border border-base-200 dark:border-base-700 rounded-default text-sm text-font-default-light dark:text-font-default-dark placeholder-font-subtle-light dark:placeholder-font-subtle-dark focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                            >
+                        </div>
+                    </div>
+
+                    {# Tree Navigation (Scrollable) #}
+                    <div class="p-4" style="flex: 1 1 0%; overflow-y: auto; overflow-x: hidden; min-height: 0;">
+                        {# Tree items #}
+                        <div class="space-y-1">
+                            <template x-for="(node, index) in filteredTree" :key="node.id">
+                                <div>
+                                    {% include 'django_admin/documentation_tree_node.html' %}
+                                </div>
+                            </template>
+                        </div>
+
+                        {# Empty state #}
+                        <div x-show="!filteredTree || filteredTree.length === 0" class="text-center py-8">
+                            <span class="material-symbols-outlined text-4xl text-font-subtle-light dark:text-font-subtle-dark opacity-30 mb-2 block">
+                                folder_open
+                            </span>
+                            <p class="text-sm text-font-subtle-light dark:text-font-subtle-dark">
+                                No documentation sections found
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                {# Main Content Area (Scrollable) #}
+                <div x-ref="contentScroll" class="bg-white dark:bg-base-900" style="flex: 1 1 0%; overflow-y: auto; overflow-x: hidden; min-height: 0;">
+                    <div class="p-8">
+                        {# Content already has prose classes from markdown renderer #}
+                        <div
+                            x-show="activeContent"
+                            x-html="activeContent"
+                        ></div>
+
+                        {# Empty State #}
+                        <div
+                            x-show="!activeContent"
+                            class="flex flex-col items-center justify-center text-center py-12"
+                        >
+                            <span class="material-symbols-outlined text-6xl text-font-subtle-light dark:text-font-subtle-dark opacity-30 mb-4">
+                                description
+                            </span>
+                            <p class="text-font-default-light dark:text-font-default-dark text-base">
+                                Select a section from the sidebar to view documentation
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+{# Alpine.js Component #}
+<script>
+function docModal() {
+    return {
+        open: false,
+        searchQuery: '',
+        activeNode: null,
+        activeContent: '',
+        expandedNodes: new Set(),
+        tree: {{ documentation_tree|safe }},
+        filteredTree: [],
+
+        init() {
+            this.filteredTree = this.tree || [];
+
+            // Auto-select first item with content
+            const firstNode = this.findFirstContentNode(this.filteredTree);
+            if (firstNode) {
+                this.selectNode(firstNode);
+            }
+
+            // =========================================================================
+            // MERMAID RENDERING FIX:
+            // Mermaid cannot calculate SVG dimensions when parent is hidden.
+            // We must wait for modal to be VISIBLE before calling mermaid.run().
+            // See: https://github.com/mermaid-js/mermaid/issues/1846
+            // =========================================================================
+            this.$watch('open', (isOpen) => {
+                if (isOpen) {
+                    // Wait for DOM update, then render when modal is visible
+                    this.$nextTick(() => {
+                        this.renderMermaidDiagrams();
+                    });
+                }
+            });
+        },
+
+        /**
+         * Render Mermaid diagrams and apply Prism syntax highlighting.
+         *
+         * IMPORTANT: Only call when modal is VISIBLE (open === true).
+         * Mermaid needs to measure text to calculate SVG dimensions.
+         * If called while hidden, diagrams will be empty (16x16 viewBox).
+         */
+        renderMermaidDiagrams() {
+            // Call the global renderMermaid function from mermaid_plugin.py
+            if (window.renderMermaid) {
+                window.renderMermaid();
+            }
+            // Apply Prism syntax highlighting for code blocks
+            if (window.Prism) {
+                Prism.highlightAll();
+            }
+        },
+
+        findFirstContentNode(nodes) {
+            for (const node of nodes) {
+                if (node.content) {
+                    return node;
+                }
+                if (node.children && node.children.length > 0) {
+                    const found = this.findFirstContentNode(node.children);
+                    if (found) return found;
+                }
+            }
+            return null;
+        },
+
+        selectNode(node) {
+            if (!node.content) {
+                // Folder - toggle expand
+                this.toggleExpand(node.id);
+                return;
+            }
+
+            this.activeNode = node.id;
+            this.activeContent = node.content;
+
+            // Ensure parent folders are expanded
+            this.expandParents(node.id);
+
+            // Scroll content area to top
+            if (this.$refs.contentScroll) {
+                this.$refs.contentScroll.scrollTop = 0;
+            }
+
+            // Apply syntax highlighting and Mermaid rendering after content update
+            // Only render if modal is open (mermaid needs visible container)
+            if (this.open) {
+                this.$nextTick(() => {
+                    this.renderMermaidDiagrams();
+                });
+            }
+        },
+
+        toggleExpand(nodeId) {
+            if (this.expandedNodes.has(nodeId)) {
+                this.expandedNodes.delete(nodeId);
+            } else {
+                this.expandedNodes.add(nodeId);
+            }
+        },
+
+        isExpanded(nodeId) {
+            return this.expandedNodes.has(nodeId);
+        },
+
+        isActive(nodeId) {
+            return this.activeNode === nodeId;
+        },
+
+        expandParents(nodeId) {
+            // Extract parent IDs from node ID pattern
+            const parts = nodeId.split('-');
+            for (let i = 1; i < parts.length; i++) {
+                const parentId = 'folder-' + parts.slice(1, i).join('-');
+                this.expandedNodes.add(parentId);
+            }
+        },
+
+        filterTree() {
+            if (!this.searchQuery.trim()) {
+                this.filteredTree = this.tree;
+                return;
+            }
+
+            const query = this.searchQuery.toLowerCase();
+            this.filteredTree = this.filterNodes(this.tree, query);
+
+            // Auto-expand all nodes when searching
+            this.expandedNodes.clear();
+            this.addAllNodeIds(this.filteredTree);
+        },
+
+        filterNodes(nodes, query) {
+            const filtered = [];
+
+            for (const node of nodes) {
+                const labelMatch = node.label.toLowerCase().includes(query);
+                let childrenMatch = [];
+
+                if (node.children && node.children.length > 0) {
+                    childrenMatch = this.filterNodes(node.children, query);
+                }
+
+                if (labelMatch || childrenMatch.length > 0) {
+                    filtered.push({
+                        ...node,
+                        children: childrenMatch
+                    });
+                }
+            }
+
+            return filtered;
+        },
+
+        addAllNodeIds(nodes) {
+            for (const node of nodes) {
+                if (!node.content) {
+                    this.expandedNodes.add(node.id);
+                }
+                if (node.children && node.children.length > 0) {
+                    this.addAllNodeIds(node.children);
+                }
+            }
+        }
+    };
+}
+</script>
+
+{# Prism.js for syntax highlighting #}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css">
+<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/plugins/autoloader/prism-autoloader.min.js"></script>
+
+{# Documentation Modal Styles - loaded AFTER Prism to override backgrounds #}
+<link rel="stylesheet" href="{% static 'django_admin/css/documentation-modal.css' %}">
+

django_cfg/modules/django_admin/templates/django_admin/documentation_tree_node.html

@@ -0,0 +1,124 @@
+{# Recursive Tree Node Template for Documentation Modal #}
+
+<div class="select-none">
+    {# Node Item #}
+    <div
+        @click="selectNode(node)"
+        :class="{
+            'bg-primary-50 dark:bg-primary-900/20 border-primary-300 dark:border-primary-700': isActive(node.id),
+            'hover:bg-base-100 dark:hover:bg-white/[.04]': !isActive(node.id)
+        }"
+        class="flex items-center gap-2 px-3 py-2 rounded-default cursor-pointer transition-all duration-150 border border-transparent"
+    >
+        {# Icon - always show description for content nodes #}
+        <span class="material-symbols-outlined text-base text-primary-600 dark:text-primary-400">
+            description
+        </span>
+
+        {# Label #}
+        <span
+            class="text-sm flex-1 line-clamp-2"
+            :class="{
+                'font-semibold text-primary-700 dark:text-primary-300': isActive(node.id),
+                'text-font-default-light dark:text-font-default-dark': !isActive(node.id)
+            }"
+            x-text="node.label"
+        ></span>
+    </div>
+
+    {# Children (recursive) #}
+    <template x-if="node.children && node.children.length > 0 && isExpanded(node.id)">
+        <div class="ml-4 mt-1 space-y-1 border-l-2 border-base-200 dark:border-base-700 pl-2">
+            <template x-for="childNode in node.children" :key="childNode.id">
+                <div>
+                    {# Recursively render child nodes #}
+                    <div
+                        x-data="{ node: childNode }"
+                    >
+                        {# Inline recursive template #}
+                        <div class="select-none">
+                            <div
+                                @click="selectNode(node)"
+                                :class="{
+                                    'bg-primary-50 dark:bg-primary-900/20 border-primary-300 dark:border-primary-700': isActive(node.id),
+                                    'hover:bg-base-100 dark:hover:bg-white/[.04]': !isActive(node.id)
+                                }"
+                                class="flex items-center gap-2 px-3 py-2 rounded-default cursor-pointer transition-all duration-150 border border-transparent"
+                            >
+                                <template x-if="node.children && node.children.length > 0">
+                                    <button
+                                        @click.stop="toggleExpand(node.id)"
+                                        class="p-0.5 hover:bg-base-200 dark:hover:bg-base-800 rounded transition-colors"
+                                    >
+                                        <span
+                                            class="material-symbols-outlined text-base text-font-default-light dark:text-font-default-dark transition-transform duration-200"
+                                            :class="isExpanded(node.id) ? 'rotate-90' : ''"
+                                            x-text="isExpanded(node.id) ? 'expand_more' : 'chevron_right'"
+                                        ></span>
+                                    </button>
+                                </template>
+
+                                <template x-if="!node.children || node.children.length === 0">
+                                    <div class="w-5"></div>
+                                </template>
+
+                                <span
+                                    class="material-symbols-outlined text-base"
+                                    :class="node.content ? 'text-primary-600 dark:text-primary-400' : 'text-font-subtle-light dark:text-font-subtle-dark'"
+                                    x-text="node.content ? 'description' : 'folder'"
+                                ></span>
+
+                                <span
+                                    class="text-sm flex-1"
+                                    :class="{
+                                        'font-semibold text-primary-700 dark:text-primary-300': isActive(node.id),
+                                        'text-font-default-light dark:text-font-default-dark': !isActive(node.id),
+                                        'font-medium': !node.content
+                                    }"
+                                    x-text="node.label"
+                                ></span>
+                            </div>
+
+                            <template x-if="node.children && node.children.length > 0 && isExpanded(node.id)">
+                                <div class="ml-4 mt-1 space-y-1 border-l-2 border-base-200 dark:border-base-700 pl-2">
+                                    <template x-for="grandChild in node.children" :key="grandChild.id">
+                                        <div x-data="{ node: grandChild }">
+                                            {# Deep nesting uses same pattern #}
+                                            <div
+                                                @click="selectNode(node)"
+                                                :class="{
+                                                    'bg-primary-50 dark:bg-primary-900/20 border-primary-300 dark:border-primary-700': isActive(node.id),
+                                                    'hover:bg-base-100 dark:hover:bg-white/[.04]': !isActive(node.id)
+                                                }"
+                                                class="flex items-center gap-2 px-3 py-2 rounded-default cursor-pointer transition-all duration-150 border border-transparent"
+                                            >
+                                                <template x-if="!node.children || node.children.length === 0">
+                                                    <div class="w-5"></div>
+                                                </template>
+
+                                                <span
+                                                    class="material-symbols-outlined text-base"
+                                                    :class="node.content ? 'text-primary-600 dark:text-primary-400' : 'text-font-subtle-light dark:text-font-subtle-dark'"
+                                                    x-text="'description'"
+                                                ></span>
+
+                                                <span
+                                                    class="text-sm flex-1"
+                                                    :class="{
+                                                        'font-semibold text-primary-700 dark:text-primary-300': isActive(node.id),
+                                                        'text-font-default-light dark:text-font-default-dark': !isActive(node.id)
+                                                    }"
+                                                    x-text="node.label"
+                                                ></span>
+                                            </div>
+                                        </div>
+                                    </template>
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </div>
+    </template>
+</div>

django_cfg/modules/django_admin/templates/django_admin/markdown_docs_block.html

@@ -0,0 +1,37 @@
+{% load static %}
+{# Markdown Documentation Block Template #}
+{#
+Usage:
+    {% include "django_admin/markdown_docs_block.html" with
+        content=markdown_content
+        title="Documentation"
+        collapsible=True
+        default_open=False
+    %}
+#}
+
+<div class="mb-6">
+    {% if collapsible %}
+    <details class="group border border-base-200 dark:border-base-700 rounded-lg overflow-hidden bg-white dark:bg-base-800 shadow-sm hover:shadow-md transition-shadow"{% if default_open %} open{% endif %}>
+        <summary class="cursor-pointer px-4 py-3 bg-base-50 dark:bg-base-900 hover:bg-base-100 dark:hover:bg-base-800 transition-colors flex items-center gap-2 select-none">
+            <span class="material-symbols-outlined text-base text-primary-600 dark:text-primary-400 group-open:rotate-90 transition-transform">chevron_right</span>
+            <span class="font-semibold text-sm text-font-default-light dark:text-font-default-dark">{{ title|default:"Documentation" }}</span>
+            <span class="text-xs text-font-subtle-light dark:text-font-subtle-dark ml-auto">{% if default_open %}Click to collapse{% else %}Click to expand{% endif %}</span>
+        </summary>
+        <div class="p-4 bg-white dark:bg-base-800"{% if max_height %} style="max-height: {{ max_height }}; overflow-y: auto;"{% endif %}>
+            {{ content|safe }}
+        </div>
+    </details>
+    {% else %}
+    <div class="border border-base-200 dark:border-base-700 rounded-lg overflow-hidden bg-white dark:bg-base-800 shadow-sm">
+        {% if title %}
+        <div class="px-4 py-3 bg-base-50 dark:bg-base-900 border-b border-base-200 dark:border-base-700">
+            <h3 class="font-semibold text-sm text-font-default-light dark:text-font-default-dark">{{ title }}</h3>
+        </div>
+        {% endif %}
+        <div class="p-4"{% if max_height %} style="max-height: {{ max_height }}; overflow-y: auto;"{% endif %}>
+            {{ content|safe }}
+        </div>
+    </div>
+    {% endif %}
+</div>

django_cfg/modules/django_admin/templates/django_admin/widgets/avatar_display.html

@@ -0,0 +1,56 @@
+{% comment %}
+Avatar Display Widget
+Shows user avatar with fallback to initials badge.
+{% endcomment %}
+
+{% if photo_url %}
+    {# Has photo #}
+    {% if show_as_card %}
+    <div class="flex items-center gap-2">
+        <img
+            src="{{ photo_url }}"
+            alt="{{ name }}"
+            class="rounded-full object-cover"
+            style="width: {{ avatar_size }}px; height: {{ avatar_size }}px;"
+        >
+        <div>
+            <div class="font-medium">{{ name }}</div>
+            {% if subtitle %}
+            <div class="text-sm text-gray-500 dark:text-gray-400">{{ subtitle }}</div>
+            {% endif %}
+        </div>
+    </div>
+    {% else %}
+    <img
+        src="{{ photo_url }}"
+        alt="{{ name }}"
+        class="rounded-full object-cover"
+        style="width: {{ avatar_size }}px; height: {{ avatar_size }}px;"
+    >
+    {% endif %}
+{% else %}
+    {# Fallback to initials #}
+    {% if show_as_card %}
+    <div class="flex items-center gap-2">
+        <div
+            class="rounded-full {{ color_class }} flex items-center justify-center font-semibold"
+            style="width: {{ avatar_size }}px; height: {{ avatar_size }}px;"
+        >
+            {{ initials }}
+        </div>
+        <div>
+            <div class="font-medium">{{ name }}</div>
+            {% if subtitle %}
+            <div class="text-sm text-gray-500 dark:text-gray-400">{{ subtitle }}</div>
+            {% endif %}
+        </div>
+    </div>
+    {% else %}
+    <div
+        class="rounded-full {{ color_class }} flex items-center justify-center font-semibold"
+        style="width: {{ avatar_size }}px; height: {{ avatar_size }}px;"
+    >
+        {{ initials }}
+    </div>
+    {% endif %}
+{% endif %}

django_cfg/modules/django_admin/templates/django_admin/widgets/counter_badge_display.html

@@ -0,0 +1,21 @@
+{% comment %}
+Counter Badge Display Widget
+Shows counter with optional link.
+{% endcomment %}
+
+{% if hide_on_zero and count == 0 %}
+    {# Hidden when zero #}
+{% else %}
+    {% if link_url %}
+    <a href="{{ link_url }}" target="{{ link_target }}">
+    {% endif %}
+    <span class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium {{ color_class }}">
+        {% if icon %}
+        <span class="material-symbols-outlined mr-1" style="font-size: 14px; vertical-align: middle;">{{ icon }}</span>
+        {% endif %}
+        {{ count_display }}
+    </span>
+    {% if link_url %}
+    </a>
+    {% endif %}
+{% endif %}

django_cfg/modules/django_admin/templates/django_admin/widgets/encrypted_field.html

@@ -0,0 +1,80 @@
+{% comment %}
+Template for encrypted text field with copy button.
+Based on unfold/widgets/text.html with added copy functionality.
+{% endcomment %}
+
+<div class="max-w-2xl relative w-full">
+    {% if widget.prefix %}
+        <span class="absolute left-3 top-0 bottom-0 flex items-center justify-center">
+            {{ widget.prefix }}
+        </span>
+    {% endif %}
+
+    {% if widget.prefix_icon %}
+        <span class="material-symbols-outlined absolute left-3 top-0 bottom-0 flex items-center justify-center text-base-400 dark:text-base-500">
+            {{ widget.prefix_icon }}
+        </span>
+    {% endif %}
+
+    {% include "django/forms/widgets/input.html" %}
+
+    {% if widget.suffix %}
+        <span class="absolute right-3 top-0 bottom-0 flex items-center justify-center">
+            {{ widget.suffix }}
+        </span>
+    {% endif %}
+
+    {% if widget.suffix_icon %}
+        <span class="material-symbols-outlined absolute right-3 top-0 bottom-0 flex items-center justify-center text-base-400 dark:text-base-500">
+            {{ widget.suffix_icon }}
+        </span>
+    {% endif %}
+
+    {% if widget.show_copy_button %}
+        <button
+            type="button"
+            onclick="copyEncryptedField(this)"
+            class="material-symbols-outlined absolute right-3 top-0 bottom-0 flex items-center justify-center text-base-400 hover:text-primary-600 dark:text-base-500 dark:hover:text-primary-500 cursor-pointer transition-colors"
+            title="Copy to clipboard"
+        >
+            content_copy
+        </button>
+    {% endif %}
+</div>
+
+<script>
+function copyEncryptedField(button) {
+    // Get the input field (previous sibling of button's parent)
+    const container = button.parentElement;
+    const input = container.querySelector('input');
+
+    if (!input || !input.value) {
+        return;
+    }
+
+    // Copy to clipboard
+    navigator.clipboard.writeText(input.value).then(() => {
+        // Visual feedback - change icon temporarily
+        const originalIcon = button.textContent;
+        button.textContent = 'check';
+        button.classList.add('text-green-600', 'dark:text-green-500');
+
+        // Reset after 2 seconds
+        setTimeout(() => {
+            button.textContent = originalIcon;
+            button.classList.remove('text-green-600', 'dark:text-green-500');
+        }, 2000);
+    }).catch(err => {
+        console.error('Failed to copy:', err);
+        // Show error feedback
+        const originalIcon = button.textContent;
+        button.textContent = 'error';
+        button.classList.add('text-red-600', 'dark:text-red-500');
+
+        setTimeout(() => {
+            button.textContent = originalIcon;
+            button.classList.remove('text-red-600', 'dark:text-red-500');
+        }, 2000);
+    });
+}
+</script>