From f35908095c7bc9546d16008bb48cd18593b3d8d1 Mon Sep 17 00:00:00 2001
From: Enciphered <shaamilahmed@gmail.com>
Date: Sat, 30 May 2026 13:40:18 +0500
Subject: [PATCH] feat: implement interactive calendar view grids and
 confirmation action patterns

---
 static/js/components.js             | 258 +++++++++++++++++++++-------
 templates/components/date_time.html |   2 +-
 templates/components/macros.html    |  11 +-
 templates/components/modals.html    | 119 +++++++++++++
 templates/components/sheets.html    | 126 ++++++++++++++
 5 files changed, 449 insertions(+), 67 deletions(-)

diff --git a/static/js/components.js b/static/js/components.js
index 67b5eb1..421465f 100644
--- a/static/js/components.js
+++ b/static/js/components.js
@@ -113,10 +113,13 @@ document.addEventListener('DOMContentLoaded', () => {
         const valueInput = picker.querySelector('.datepicker-value');
         const monthYearLabel = picker.querySelector('.datepicker-month-year');
         const daysContainer = picker.querySelector('.datepicker-days');
-        if (!valueInput || !monthYearLabel || !daysContainer) return;
+        const weekdaysRow = picker.querySelector('.datepicker-weekdays');
+        if (!valueInput || !daysContainer) return;
 
         let currentYear = parseInt(picker.dataset.year);
         let currentMonth = parseInt(picker.dataset.month); // 0-indexed
+        let view = picker.dataset.view || 'days';
+        picker.dataset.view = view;
 
         if (isNaN(currentYear) || isNaN(currentMonth)) {
             const val = valueInput.value;
@@ -131,59 +134,116 @@ document.addEventListener('DOMContentLoaded', () => {
         const today = new Date();
 
         const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-        monthYearLabel.textContent = `${monthNames[currentMonth]} ${currentYear}`;
+        
+        // Update header label
+        if (monthYearLabel) {
+            if (view === 'days') {
+                monthYearLabel.textContent = `${monthNames[currentMonth]} ${currentYear}`;
+            } else if (view === 'months') {
+                monthYearLabel.textContent = `${currentYear}`;
+            } else if (view === 'years') {
+                const startYear = currentYear - (currentYear % 12);
+                monthYearLabel.textContent = `${startYear} - ${startYear + 11}`;
+            }
+        }
+
+        // Toggle weekdays row visibility
+        if (weekdaysRow) {
+            if (view === 'days') {
+                weekdaysRow.classList.remove('hidden');
+            } else {
+                weekdaysRow.classList.add('hidden');
+            }
+        }
+
+        // Reset grid columns class based on active view mode
+        if (view === 'days') {
+            daysContainer.classList.remove('grid-cols-3');
+            daysContainer.classList.add('grid-cols-7');
+        } else {
+            daysContainer.classList.remove('grid-cols-7');
+            daysContainer.classList.add('grid-cols-3');
+        }
 
         daysContainer.innerHTML = '';
 
-        const firstDayIndex = new Date(currentYear, currentMonth, 1).getDay();
-        const totalDays = new Date(currentYear, currentMonth + 1, 0).getDate();
-        const prevTotalDays = new Date(currentYear, currentMonth, 0).getDate();
+        if (view === 'days') {
+            const firstDayIndex = new Date(currentYear, currentMonth, 1).getDay();
+            const totalDays = new Date(currentYear, currentMonth + 1, 0).getDate();
+            const prevTotalDays = new Date(currentYear, currentMonth, 0).getDate();
 
-        // Prev month padding
-        for (let i = firstDayIndex - 1; i >= 0; i--) {
-            const dayNum = prevTotalDays - i;
-            const btn = document.createElement('button');
-            btn.type = 'button';
-            btn.disabled = true;
-            btn.className = 'py-1 text-center text-xs text-slate-700 cursor-not-allowed font-medium';
-            btn.textContent = dayNum;
-            daysContainer.appendChild(btn);
-        }
+            // Prev month padding
+            for (let i = firstDayIndex - 1; i >= 0; i--) {
+                const dayNum = prevTotalDays - i;
+                const btn = document.createElement('button');
+                btn.type = 'button';
+                btn.disabled = true;
+                btn.className = 'py-1 text-center text-xs text-slate-700 cursor-not-allowed font-medium';
+                btn.textContent = dayNum;
+                daysContainer.appendChild(btn);
+            }
 
-        // Current month days
-        for (let day = 1; day <= totalDays; day++) {
-            const btn = document.createElement('button');
-            btn.type = 'button';
-            const yearStr = currentYear;
-            const monthStr = String(currentMonth + 1).padStart(2, '0');
-            const dayStr = String(day).padStart(2, '0');
-            const dateStr = `${yearStr}-${monthStr}-${dayStr}`;
+            // Current month days
+            for (let day = 1; day <= totalDays; day++) {
+                const btn = document.createElement('button');
+                btn.type = 'button';
+                const yearStr = currentYear;
+                const monthStr = String(currentMonth + 1).padStart(2, '0');
+                const dayStr = String(day).padStart(2, '0');
+                const dateStr = `${yearStr}-${monthStr}-${dayStr}`;
 
-            const isSelected = selectedDateVal === dateStr;
-            const isToday = today.getFullYear() === currentYear && today.getMonth() === currentMonth && today.getDate() === day;
+                const isSelected = selectedDateVal === dateStr;
+                const isToday = today.getFullYear() === currentYear && today.getMonth() === currentMonth && today.getDate() === day;
 
-            btn.className = `py-1 text-xs rounded-lg font-semibold hover:bg-accent hover:text-accent-foreground transition flex items-center justify-center h-7 w-7 mx-auto ${
-                isSelected ? 'bg-indigo-600 text-white hover:bg-indigo-650' :
-                isToday ? 'border border-sky-500/50 text-sky-400' : 'text-slate-350'
-            }`;
-            btn.dataset.date = dateStr;
-            btn.textContent = day;
-            daysContainer.appendChild(btn);
-        }
+                btn.className = `py-1 text-xs rounded-lg font-semibold hover:bg-accent hover:text-accent-foreground transition flex items-center justify-center h-7 w-7 mx-auto ${
+                    isSelected ? 'bg-indigo-600 text-white hover:bg-indigo-650' :
+                    isToday ? 'border border-sky-500/50 text-sky-400' : 'text-slate-350'
+                }`;
+                btn.dataset.date = dateStr;
+                btn.textContent = day;
+                daysContainer.appendChild(btn);
+            }
 
-        // Next month padding
-        const totalGrids = 42;
-        const currentGrids = firstDayIndex + totalDays;
-        for (let i = 1; i <= (totalGrids - currentGrids); i++) {
-            const btn = document.createElement('button');
-            btn.type = 'button';
-            btn.disabled = true;
-            btn.className = 'py-1 text-center text-xs text-slate-700 cursor-not-allowed font-medium';
-            btn.textContent = i;
-            daysContainer.appendChild(btn);
+            // Next month padding
+            const totalGrids = 42;
+            const currentGrids = firstDayIndex + totalDays;
+            for (let i = 1; i <= (totalGrids - currentGrids); i++) {
+                const btn = document.createElement('button');
+                btn.type = 'button';
+                btn.disabled = true;
+                btn.className = 'py-1 text-center text-xs text-slate-700 cursor-not-allowed font-medium';
+                btn.textContent = i;
+                daysContainer.appendChild(btn);
+            }
+        } else if (view === 'months') {
+            const shortMonthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+            for (let m = 0; m < 12; m++) {
+                const btn = document.createElement('button');
+                btn.type = 'button';
+                btn.className = `py-3.5 text-xs rounded-xl font-semibold transition text-center hover:bg-accent hover:text-accent-foreground ${
+                    m === currentMonth ? 'bg-indigo-600 text-white font-bold' : 'text-slate-350'
+                }`;
+                btn.dataset.monthVal = m;
+                btn.textContent = shortMonthNames[m];
+                daysContainer.appendChild(btn);
+            }
+        } else if (view === 'years') {
+            const startYear = currentYear - (currentYear % 12);
+            for (let y = 0; y < 12; y++) {
+                const yearNum = startYear + y;
+                const btn = document.createElement('button');
+                btn.type = 'button';
+                btn.className = `py-3.5 text-xs rounded-xl font-semibold transition text-center hover:bg-accent hover:text-accent-foreground ${
+                    yearNum === currentYear ? 'bg-indigo-600 text-white font-bold' : 'text-slate-350'
+                }`;
+                btn.dataset.yearVal = yearNum;
+                btn.textContent = yearNum;
+                daysContainer.appendChild(btn);
+            }
         }
     }
 
+
     // Initialize custom date pickers
     document.querySelectorAll('.custom-datepicker').forEach(picker => {
         renderCalendar(picker);
@@ -205,41 +265,85 @@ document.addEventListener('DOMContentLoaded', () => {
                 if (pop !== popover) pop.classList.add('hidden');
             });
             
-            popover.classList.toggle('hidden');
+            const isHidden = popover.classList.toggle('hidden');
+            if (!isHidden) {
+                picker.dataset.view = 'days';
+                renderCalendar(picker);
+            }
             return;
         }
 
-        // Prev Month
+        // Prev Month / Year / Decade
         const prevBtn = event.target.closest('.datepicker-prev');
         if (prevBtn) {
             const picker = prevBtn.closest('.custom-datepicker');
-            let currentMonth = parseInt(picker.dataset.month);
-            let currentYear = parseInt(picker.dataset.year);
-            currentMonth--;
-            if (currentMonth < 0) {
-                currentMonth = 11;
-                currentYear--;
+            if (picker) {
+                let currentMonth = parseInt(picker.dataset.month);
+                let currentYear = parseInt(picker.dataset.year);
+                const view = picker.dataset.view || 'days';
+                
+                if (view === 'days') {
+                    currentMonth--;
+                    if (currentMonth < 0) {
+                        currentMonth = 11;
+                        currentYear--;
+                    }
+                    picker.dataset.month = currentMonth;
+                    picker.dataset.year = currentYear;
+                } else if (view === 'months') {
+                    currentYear--;
+                    picker.dataset.year = currentYear;
+                } else if (view === 'years') {
+                    currentYear -= 12;
+                    picker.dataset.year = currentYear;
+                }
+                renderCalendar(picker);
             }
-            picker.dataset.month = currentMonth;
-            picker.dataset.year = currentYear;
-            renderCalendar(picker);
             return;
         }
 
-        // Next Month
+        // Next Month / Year / Decade
         const nextBtn = event.target.closest('.datepicker-next');
         if (nextBtn) {
             const picker = nextBtn.closest('.custom-datepicker');
-            let currentMonth = parseInt(picker.dataset.month);
-            let currentYear = parseInt(picker.dataset.year);
-            currentMonth++;
-            if (currentMonth > 11) {
-                currentMonth = 0;
-                currentYear++;
+            if (picker) {
+                let currentMonth = parseInt(picker.dataset.month);
+                let currentYear = parseInt(picker.dataset.year);
+                const view = picker.dataset.view || 'days';
+                
+                if (view === 'days') {
+                    currentMonth++;
+                    if (currentMonth > 11) {
+                        currentMonth = 0;
+                        currentYear++;
+                    }
+                    picker.dataset.month = currentMonth;
+                    picker.dataset.year = currentYear;
+                } else if (view === 'months') {
+                    currentYear++;
+                    picker.dataset.year = currentYear;
+                } else if (view === 'years') {
+                    currentYear += 12;
+                    picker.dataset.year = currentYear;
+                }
+                renderCalendar(picker);
+            }
+            return;
+        }
+
+        // Header click (switch view mode)
+        const headerBtn = event.target.closest('.datepicker-month-year');
+        if (headerBtn) {
+            const picker = headerBtn.closest('.custom-datepicker');
+            if (picker) {
+                const view = picker.dataset.view || 'days';
+                if (view === 'days') {
+                    picker.dataset.view = 'months';
+                } else if (view === 'months') {
+                    picker.dataset.view = 'years';
+                }
+                renderCalendar(picker);
             }
-            picker.dataset.month = currentMonth;
-            picker.dataset.year = currentYear;
-            renderCalendar(picker);
             return;
         }
 
@@ -260,6 +364,32 @@ document.addEventListener('DOMContentLoaded', () => {
             return;
         }
 
+        // Month click
+        const monthBtn = event.target.closest('.datepicker-days button[data-month-val]');
+        if (monthBtn) {
+            const picker = monthBtn.closest('.custom-datepicker');
+            if (picker) {
+                const monthVal = parseInt(monthBtn.dataset.monthVal);
+                picker.dataset.month = monthVal;
+                picker.dataset.view = 'days';
+                renderCalendar(picker);
+            }
+            return;
+        }
+
+        // Year click
+        const yearBtn = event.target.closest('.datepicker-days button[data-year-val]');
+        if (yearBtn) {
+            const picker = yearBtn.closest('.custom-datepicker');
+            if (picker) {
+                const yearVal = parseInt(yearBtn.dataset.yearVal);
+                picker.dataset.year = yearVal;
+                picker.dataset.view = 'months';
+                renderCalendar(picker);
+            }
+            return;
+        }
+
         // Close outside
         const openPickerPopover = document.querySelector('.datepicker-popover:not(.hidden)');
         if (openPickerPopover && !event.target.closest('.custom-datepicker')) {
diff --git a/templates/components/date_time.html b/templates/components/date_time.html
index 12e42a2..0ee205e 100644
--- a/templates/components/date_time.html
+++ b/templates/components/date_time.html
@@ -140,7 +140,7 @@
                             <td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-month-year</td>
                             <td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
                             <td class="py-3 text-slate-400">
-                                Display title label updated dynamically with current month and year (e.g. "May 2026").
+                                Clickable header button. Toggles view grid modes between days selection, months selection, and years selection.
                             </td>
                         </tr>
                         <tr>
diff --git a/templates/components/macros.html b/templates/components/macros.html
index 5990608..b7ffd42 100644
--- a/templates/components/macros.html
+++ b/templates/components/macros.html
@@ -97,6 +97,12 @@
 </div>
 {% endmacro %}
 
+{% macro modal_close_only() %}
+    </div>
+</div>
+{% endmacro %}
+
+
 {% macro sheet_open(id, title, max_width_class="max-w-sm") %}
 <div id="{{ id }}" class="sheet-dialog fixed inset-0 z-50 overflow-hidden hidden" role="dialog" aria-modal="true">
     <div class="sheet-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm opacity-0 transition-opacity duration-300 animate-fade-in"></div>
@@ -278,12 +284,13 @@
                 <button type="button" class="datepicker-prev p-1.5 rounded-lg hover:bg-secondary text-muted-foreground/90 hover:text-white transition">
                     <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
                 </button>
-                <span class="datepicker-month-year text-xs font-bold text-slate-200"></span>
+                <button type="button" class="datepicker-month-year text-xs font-bold text-slate-200 hover:bg-secondary/40 px-2 py-1 rounded-lg transition outline-none">
+                </button>
                 <button type="button" class="datepicker-next p-1.5 rounded-lg hover:bg-secondary text-muted-foreground/90 hover:text-white transition">
                     <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
                 </button>
             </div>
-            <div class="grid grid-cols-7 gap-1 text-center text-[10px] font-bold text-slate-500 mb-2">
+            <div class="datepicker-weekdays grid grid-cols-7 gap-1 text-center text-[10px] font-bold text-slate-500 mb-2">
                 <span>Su</span><span>Mo</span><span>Tu</span><span>We</span><span>Th</span><span>Fr</span><span>Sa</span>
             </div>
             <div class="datepicker-days grid grid-cols-7 gap-1 text-center"></div>
diff --git a/templates/components/modals.html b/templates/components/modals.html
index f67af45..a5ed958 100644
--- a/templates/components/modals.html
+++ b/templates/components/modals.html
@@ -123,6 +123,107 @@
             </div>
         </section>
 
+        <!-- Confirmation Action Pattern -->
+        <section class="space-y-4 border-t border-border/60 pt-6">
+            <h2 class="text-lg font-bold text-slate-200">Confirmation Actions (e.g., Deletes)</h2>
+            <p class="text-xs text-muted-foreground leading-relaxed">
+                To prevent accidental actions, wrap destructive or state-changing actions (such as deletions) in a confirmation dialog modal. Since modals are populated inside the DOM structure, you can either wrap the action inside a standard HTML form or use HTMX for AJAX deletions.
+            </p>
+
+            <div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
+                <!-- Tab Headers -->
+                <div class="flex border-b border-border/60 pb-1.5">
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400" onclick="toggleWikiTabs(this, 'confirm-demo-pane')">Interactive Demo</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'confirm-markup-form')">Form POST (Standard)</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'confirm-markup-htmx')">HTMX Delete (AJAX)</button>
+                </div>
+
+                <!-- Interactive Demo Pane -->
+                <div id="confirm-demo-pane" class="wiki-pane py-2">
+                    <div class="flex items-center gap-4">
+                        <span class="text-xs text-slate-400 font-medium">Demo Project Entity:</span>
+                        <div class="flex items-center gap-3 px-3 py-2 bg-secondary/20 border border-border rounded-xl">
+                            <span class="text-xs font-semibold text-slate-200">Important Draft.docx</span>
+                            {{ ui::modal_trigger(target_id="wiki-confirm-delete-modal", label="Delete Draft", variant="destructive", extra_class="!px-2.5 !py-1 text-[10px]") }}
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Form POST Code Markup -->
+                <div id="confirm-markup-form" class="wiki-pane hidden space-y-4">
+                    <div class="relative group">
+                        <button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-slate-455 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
+                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
+                            Copy Code
+                        </button>
+                        <pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>{{ "{%" }} import "components/macros.html" as ui {{ "%}" }}
+
+&lt;!-- 1. The Trigger Button (usually part of a table or list) --&gt;
+{{ "{{" }} ui::modal_trigger(target_id="delete-confirm-modal-123", label="Delete Entity", variant="destructive") {{ "}}" }}
+
+&lt;!-- 2. The Confirmation Dialog Modal with embedded Form --&gt;
+{{ "{%" }} call ui::modal_open(id="delete-confirm-modal-123", title="Confirm Deletion") {{ "%}" }}
+    &lt;form action="/entities/123/delete" method="POST" class="space-y-4 mt-2"&gt;
+        &lt;p class="text-xs text-muted-foreground leading-relaxed text-center"&gt;
+            Are you sure you want to permanently delete this entity? This action cannot be undone.
+        &lt;/p&gt;
+        
+        &lt;div class="flex gap-3 mt-4"&gt;
+            &lt;!-- Cancel Button (closes the modal via .modal-close) --&gt;
+            &lt;button type="button" class="modal-close flex-1 py-2 rounded-xl bg-secondary border border-border hover:bg-secondary/80 transition text-xs font-semibold text-slate-200"&gt;
+                Cancel
+            &lt;/button&gt;
+            &lt;!-- Submit Button (performs POST redirect) --&gt;
+            &lt;button type="submit" class="flex-1 py-2 rounded-xl bg-destructive text-destructive-foreground hover:opacity-90 shadow-md transition text-xs font-bold"&gt;
+                Confirm Delete
+            &lt;/button&gt;
+        &lt;/div&gt;
+    &lt;/form&gt;
+{{ "{%" }} call ui::modal_close_only() {{ "%}" }}</code></pre>
+                    </div>
+                </div>
+
+                <!-- HTMX AJAX Code Markup -->
+                <div id="confirm-markup-htmx" class="wiki-pane hidden space-y-4">
+                    <div class="relative group">
+                        <button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-slate-455 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
+                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
+                            Copy Code
+                        </button>
+                        <pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>{{ "{%" }} import "components/macros.html" as ui {{ "%}" }}
+
+&lt;!-- 1. Trigger Button --&gt;
+{{ "{{" }} ui::modal_trigger(target_id="delete-htmx-modal-123", label="Delete Entity", variant="destructive") {{ "}}" }}
+
+&lt;!-- 2. The Confirmation Dialog Modal with HTMX triggers --&gt;
+{{ "{%" }} call ui::modal_open(id="delete-htmx-modal-123", title="Confirm Deletion") {{ "%}" }}
+    &lt;div class="space-y-4 mt-2"&gt;
+        &lt;p class="text-xs text-muted-foreground leading-relaxed text-center"&gt;
+            Are you sure you want to delete this entity? This triggers an async HTMX request and removes the element.
+        &lt;/p&gt;
+        
+        &lt;div class="flex gap-3 mt-4"&gt;
+            &lt;!-- Cancel Button --&gt;
+            &lt;button type="button" class="modal-close flex-1 py-2 rounded-xl bg-secondary border border-border hover:bg-secondary/80 transition text-xs font-semibold text-slate-200"&gt;
+                Cancel
+            &lt;/button&gt;
+            &lt;!-- HTMX Action button. Adding .modal-close closes the modal animation instantly as the request goes out --&gt;
+            &lt;button type="button" 
+                    hx-delete="/entities/123" 
+                    hx-target="#entity-row-123" 
+                    hx-swap="outerHTML"
+                    class="modal-close flex-1 py-2 rounded-xl bg-destructive text-destructive-foreground hover:opacity-90 shadow-md transition text-xs font-bold"&gt;
+                Confirm Delete
+            &lt;/button&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+{{ "{%" }} call ui::modal_close_only() {{ "%}" }}</code></pre>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
     </div>
 </div>
 
@@ -131,6 +232,24 @@
     <p class="text-xs text-slate-405 mt-2 leading-relaxed">This modal is animated and handled globally by <code>components.js</code>. Pressing escape or clicking outside closes it instantly.</p>
 {{ ui::modal_close(close_label="Dismiss Modal") }}
 
+<!-- Interactive Confirm Delete Modal for the Demo -->
+{{ ui::modal_open(id="wiki-confirm-delete-modal", title="Confirm Deletion") }}
+    <div class="space-y-4 mt-2">
+        <p class="text-xs text-slate-400 leading-relaxed text-center">
+            Are you sure you want to permanently delete <strong class="text-slate-200">"Important Draft.docx"</strong>? This action cannot be undone.
+        </p>
+        <div class="flex gap-3 mt-4">
+            <button class="modal-close flex-1 py-2 rounded-xl bg-secondary border border-border hover:bg-secondary/80 transition text-xs font-semibold text-slate-200">
+                Cancel
+            </button>
+            <button class="modal-close flex-1 py-2 rounded-xl bg-rose-600 hover:bg-rose-500 text-white transition text-xs font-bold shadow-md" onclick="showToast('Entity &ldquo;Important Draft.docx&rdquo; deleted successfully!')">
+                Confirm Delete
+            </button>
+        </div>
+    </div>
+{{ ui::modal_close_only() }}
+
+
 <script>
     function toggleWikiTabs(btn, paneId) {
         const card = btn.closest('.border-border');
diff --git a/templates/components/sheets.html b/templates/components/sheets.html
index b7a5f47..7ea10fd 100644
--- a/templates/components/sheets.html
+++ b/templates/components/sheets.html
@@ -120,6 +120,111 @@
             </div>
         </section>
 
+        <!-- Confirmation Action Pattern -->
+        <section class="space-y-4 border-t border-border/60 pt-6">
+            <h2 class="text-lg font-bold text-slate-200">Confirmation Actions (e.g., Deletes)</h2>
+            <p class="text-xs text-muted-foreground leading-relaxed">
+                Slide-over sheets are highly effective for confirmation dialogs when you want to provide more context, metadata details, or descriptive warnings about the entity being impacted before executing the action.
+            </p>
+
+            <div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
+                <!-- Tab Headers -->
+                <div class="flex border-b border-border/60 pb-1.5">
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400" onclick="toggleWikiTabs(this, 'confirm-sheet-demo-pane')">Interactive Demo</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'confirm-sheet-markup-form')">Form POST (Standard)</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'confirm-sheet-markup-htmx')">HTMX Delete (AJAX)</button>
+                </div>
+
+                <!-- Interactive Demo Pane -->
+                <div id="confirm-sheet-demo-pane" class="wiki-pane py-2">
+                    <div class="flex items-center gap-4">
+                        <span class="text-xs text-slate-400 font-medium">Demo Database Entity:</span>
+                        <div class="flex items-center gap-3 px-3 py-2 bg-secondary/20 border border-border rounded-xl">
+                            <span class="text-xs font-semibold text-slate-200">User Account: ahmed_shaamil</span>
+                            {{ ui::sheet_trigger(target_id="wiki-confirm-delete-sheet", label="Delete User", variant="destructive", extra_class="!px-2.5 !py-1 text-[10px]") }}
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Form POST Code Markup -->
+                <div id="confirm-sheet-markup-form" class="wiki-pane hidden space-y-4">
+                    <div class="relative group">
+                        <button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-slate-455 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
+                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
+                            Copy Code
+                        </button>
+                        <pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>{{ "{%" }} import "components/macros.html" as ui {{ "%}" }}
+
+&lt;!-- 1. Trigger Button --&gt;
+{{ "{{" }} ui::sheet_trigger(target_id="delete-sheet-confirm-123", label="Delete Account", variant="destructive") {{ "}}" }}
+
+&lt;!-- 2. Slide Drawer with Form --&gt;
+{{ "{%" }} call ui::sheet_open(id="delete-sheet-confirm-123", title="Confirm Account Deletion", max_width_class="max-w-md") {{ "%}" }}
+    &lt;form action="/accounts/123/delete" method="POST" class="flex flex-col justify-between h-full space-y-6"&gt;
+        &lt;div class="space-y-4 mt-2"&gt;
+            &lt;p class="text-xs text-muted-foreground leading-relaxed"&gt;
+                You are about to delete this account. This will invalidate all associated access tokens and permanently purge database profiles.
+            &lt;/p&gt;
+            &lt;div class="p-3.5 rounded-2xl bg-destructive/10 border border-destructive/20 text-[11px] text-destructive-foreground leading-normal"&gt;
+                Warning: This action is irreversible. Enter confirmation parameters if required.
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="flex gap-3 pt-4 border-t border-border mt-auto"&gt;
+            &lt;button type="button" class="sheet-close flex-1 py-2.5 rounded-xl bg-secondary border border-border hover:bg-secondary/80 transition text-xs font-semibold text-slate-200"&gt;
+                Cancel
+            &lt;/button&gt;
+            &lt;button type="submit" class="flex-1 py-2.5 rounded-xl bg-destructive text-destructive-foreground hover:opacity-90 shadow-md transition text-xs font-bold"&gt;
+                Confirm Delete
+            &lt;/button&gt;
+        &lt;/div&gt;
+    &lt;/form&gt;
+{{ "{%" }} call ui::sheet_close(save_label="") {{ "%}" }}</code></pre>
+                    </div>
+                </div>
+
+                <!-- HTMX AJAX Code Markup -->
+                <div id="confirm-sheet-markup-htmx" class="wiki-pane hidden space-y-4">
+                    <div class="relative group">
+                        <button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-slate-455 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
+                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
+                            Copy Code
+                        </button>
+                        <pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>{{ "{%" }} import "components/macros.html" as ui {{ "%}" }}
+
+&lt;!-- 1. Trigger Button --&gt;
+{{ "{{" }} ui::sheet_trigger(target_id="delete-sheet-htmx-123", label="Delete Account", variant="destructive") {{ "}}" }}
+
+&lt;!-- 2. Slide Drawer with HTMX --&gt;
+{{ "{%" }} call ui::sheet_open(id="delete-sheet-htmx-123", title="Confirm Account Deletion", max_width_class="max-w-md") {{ "%}" }}
+    &lt;div class="flex flex-col justify-between h-full space-y-6"&gt;
+        &lt;div class="space-y-4 mt-2"&gt;
+            &lt;p class="text-xs text-muted-foreground leading-relaxed"&gt;
+                Are you sure you want to delete this account? This triggers an async HTMX request and removes the element.
+            &lt;/p&gt;
+        &lt;/div&gt;
+
+        &lt;div class="flex gap-3 pt-4 border-t border-border mt-auto"&gt;
+            &lt;button type="button" class="sheet-close flex-1 py-2.5 rounded-xl bg-secondary border border-border hover:bg-secondary/80 transition text-xs font-semibold text-slate-200"&gt;
+                Cancel
+            &lt;/button&gt;
+            &lt;button type="button" 
+                    hx-delete="/accounts/123" 
+                    hx-target="#account-row-123" 
+                    hx-swap="outerHTML"
+                    class="sheet-close flex-1 py-2.5 rounded-xl bg-destructive text-destructive-foreground hover:opacity-90 shadow-md transition text-xs font-bold"&gt;
+                Confirm Delete
+            &lt;/button&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+{{ "{%" }} call ui::sheet_close(save_label="") {{ "%}" }}</code></pre>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+
+
     </div>
 </div>
 
@@ -128,6 +233,27 @@
     <p class="text-xs text-slate-405 leading-relaxed">This slide-over panel demonstrates real-time sidebar parameter adjustments, sliding in from the right edge with hardware transitions.</p>
 {{ ui::sheet_close(save_label="Save Properties") }}
 
+<!-- Interactive Confirm Delete Sheet Element -->
+{{ ui::sheet_open(id="wiki-confirm-delete-sheet", title="Confirm Account Deletion", max_width_class="max-w-sm") }}
+    <p class="text-xs text-slate-400 leading-relaxed mt-2">
+        Are you sure you want to permanently delete user <strong class="text-slate-200">ahmed_shaamil</strong>? All database records and linked files will be removed.
+    </p>
+    </div> <!-- Closes .space-y-4 -->
+
+    <!-- Custom Footer Buttons -->
+    <div class="flex gap-3 pt-4 border-t border-border mt-auto">
+        <button class="sheet-close flex-1 py-2.5 rounded-xl bg-secondary border border-border hover:bg-secondary/80 transition text-xs font-semibold text-slate-200">
+            Cancel
+        </button>
+        <button class="sheet-close flex-1 py-2.5 rounded-xl bg-rose-600 hover:bg-rose-500 text-white transition text-xs font-bold shadow-lg shadow-rose-650/10" onclick="showToast('User account ahmed_shaamil deleted successfully!')">
+            Confirm Delete
+        </button>
+    </div>
+</div> <!-- Closes .sheet-content -->
+</div> <!-- Closes .absolute -->
+</div> <!-- Closes .sheet-dialog -->
+
+
 <script>
     function toggleWikiTabs(btn, paneId) {
         const card = btn.closest('.border-border');