thatcher 1.0.4 → 1.0.6

package/src/ui/dashboard-renderer.js

@@ -1,6 +1,6 @@
 import { page } from '@/ui/layout.js'
 import { getQuickActions } from '@/ui/permissions-ui.js'
-import { esc, stagePill, statusPill, TABLE_SCRIPT } from '@/ui/render-helpers.js'
+import { esc, stagePill, statusPill, TABLE_SCRIPT, emptyRow } from '@/ui/render-helpers.js'
 import { SPACING, renderCard } from '@/ui/spacing-system.js'
 
 export function renderDashboard(user, stats = {}) {
@@ -31,7 +31,7 @@ export function renderDashboard(user, stats = {}) {
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
           <span><strong>${stats.overdueRfis.length} overdue RFI${stats.overdueRfis.length !== 1 ? 's' : ''}</strong> require attention</span>
         </div>
-        <a href="/rfi" class="btn-danger-clean" style="font-size:0.8125rem;padding:6px 14px;min-height:32px">View RFIs →</a>
+        <a href="/rfi" class="btn-danger-clean" style="font-size:0.8125rem;padding:6px 14px;min-height:32px">View RFIs</a>
       </div>` : '';
 
   const quickActions = getQuickActions(user);
@@ -96,7 +96,7 @@ export function renderAuditDashboard(user, auditData = {}) {
       <td data-col="user">${a.user_name||a.user_id||'-'}</td>
       <td data-col="reason" style="font-size:12px;color:var(--color-text-muted)">${a.reason||'-'}</td>
     </tr>`
-   ).join('') || `<tr><td colspan="6" style="text-align:center;padding:${SPACING.xl};color:var(--color-text-muted)">No audit records found</td></tr>`;
+   ).join('') || emptyRow(6, 'No audit records found');
 
   const statsHtml = `<div class="stats-row">${[
     { label: 'Total Actions (30d)', value: summary.total_actions || 0 },
@@ -125,7 +125,7 @@ export function renderSystemHealth(user, healthData = {}) {
   const { database = {}, server: srv = {}, entities = {} } = healthData;
   const entRows = Object.entries(entities).map(([n, c]) =>
     `<tr data-row><td data-col="entity">${n}</td><td data-col="count" style="text-align:right">${c}</td></tr>`
-   ).join('') || `<tr><td colspan="2" style="text-align:center;padding:${SPACING.xl};color:var(--color-text-muted)">No data</td></tr>`;
+   ).join('') || emptyRow(2, 'No data');
 
   const statsHtml = `<div class="stats-row">${[
     { label: 'Server Status', value: 'Online',                    sub: 'Port: '+(srv.port||3000) },

package/src/ui/engagement-cards.js

@@ -1,5 +1,5 @@
 import { h } from '@/ui/webjsx.js'
-import { STAGE_COLORS, statusLabel } from '@/ui/render-helpers.js'
+import { STAGE_COLORS, statusLabel, esc } from '@/ui/render-helpers.js'
 import { teamAvatarGroup } from '@/ui/widgets.js'
 import { canEdit } from '@/ui/permissions-ui.js'
 
@@ -12,13 +12,13 @@ export function engagementCard(engagement, user) {
   const team = e.team?.length ? `<div class="engagement-card-team">${teamAvatarGroup(e.team, 3)}</div>` : ''
   const dueDate = e.due_date ? `<span class="text-xs text-gray-500">${typeof e.due_date === 'number' ? new Date(e.due_date * 1000).toLocaleDateString() : e.due_date}</span>` : ''
   const clientName = e.client_name || e.client?.name || ''
-  return `<div class="engagement-card card-clean" data-navigate="/engagement/${e.id}" style="cursor:pointer">
+  return `<div class="engagement-card card-clean" data-navigate="/engagement/${esc(e.id)}" style="cursor:pointer">
     <div class="card-clean-body">
-      <div class="flex justify-between items-center mb-2">${clientName ? `<span class="text-xs text-gray-500">${clientName}</span>` : '<span></span>'}${sts}</div>
-      <h3 class="font-medium mb-2">${e.name || e.title || 'Untitled'}</h3>
+      <div class="flex justify-between items-center mb-2">${clientName ? `<span class="text-xs text-gray-500">${esc(clientName)}</span>` : '<span></span>'}${sts}</div>
+      <h3 class="font-medium mb-2">${esc(e.name || e.title || 'Untitled')}</h3>
       <div class="flex items-center gap-2 mb-2">${stageBadge}${dueDate}</div>
       ${progress}
-      <div class="flex justify-between items-center mt-2">${team}<div class="flex gap-1"><a href="/engagement/${e.id}" class="btn btn-xs btn-ghost" data-stop-propagation="true">View</a>${canEdit(user, 'engagement') ? `<a href="/engagement/${e.id}/edit" class="btn btn-xs btn-outline" data-stop-propagation="true">Edit</a>` : ''}</div></div>
+      <div class="flex justify-between items-center mt-2">${team}<div class="flex gap-1"><a href="/engagement/${esc(e.id)}" class="btn btn-xs btn-ghost" data-stop-propagation="true">View</a>${canEdit(user, 'engagement') ? `<a href="/engagement/${esc(e.id)}/edit" class="btn btn-xs btn-outline" data-stop-propagation="true">Edit</a>` : ''}</div></div>
     </div></div>`
 }
 
@@ -29,8 +29,8 @@ export function mobileEngagementCard(engagement) {
   const sts = e.status ? statusLabel(e.status) : ''
   return `<div class="mobile-card mobile-engagement-card card-clean">
     <div class="card-clean-body">
-      <div class="flex justify-between items-center mb-2"><h3 class="font-medium text-sm">${e.name || e.title || 'Untitled'}</h3>${sts}</div>
-      ${e.client_name ? `<div class="text-xs text-gray-500 mb-1">${e.client_name}</div>` : ''}
+      <div class="flex justify-between items-center mb-2"><h3 class="font-medium text-sm">${esc(e.name || e.title || 'Untitled')}</h3>${sts}</div>
+      ${e.client_name ? `<div class="text-xs text-gray-500 mb-1">${esc(e.client_name)}</div>` : ''}
       <div class="flex items-center gap-2 mb-2">${stageBadge}${e.due_date ? `<span class="text-xs text-gray-500">${typeof e.due_date === 'number' ? new Date(e.due_date * 1000).toLocaleDateString() : e.due_date}</span>` : ''}</div>
       <div class="flex gap-1 mt-2"><a href="/engagement/${e.id}" class="btn btn-xs btn-primary">View</a><a href="/engagement/${e.id}/edit" class="btn btn-xs btn-outline">Edit</a></div>
     </div></div>`
@@ -51,13 +51,13 @@ export function stagePipeline(currentStage, stages = null, clickable = false, on
 export function activityTimeline(activities = [], showAll = false) {
   const maxItems = showAll ? activities.length : 10
   const items = activities.slice(0, maxItems)
-  const iconMap = { created: '&#43;', updated: '&#9998;', status_changed: '&#9679;', commented: '&#128172;', assigned: '&#128100;', uploaded: '&#128206;' }
+  const iconMap = { created: `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>`, updated: `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>`, status_changed: `<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="6"/></svg>`, commented: `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>`, assigned: `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`, uploaded: `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>` }
   const timelineItems = items.map(a => {
     const action = a.action || 'updated'
-    const icon = iconMap[action] || '&#9679;'
+    const icon = iconMap[action] || `<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true"><circle cx="12" cy="12" r="6"/></svg>`
     const ts = a.timestamp || a.created_at
     const timeStr = ts ? (typeof ts === 'number' && ts > 1e9 ? new Date(ts * 1000).toLocaleString() : new Date(ts).toLocaleString()) : ''
-    return `<div class="act-tl-item"><div class="act-tl-icon act-tl-${action}">${icon}</div><div class="act-tl-content"><div class="act-tl-header"><span class="act-tl-desc">${a.description || a.action || ''}</span></div><div class="act-tl-time">${timeStr}${a.user_name ? ' by ' + a.user_name : ''}</div></div></div>`
+    return `<div class="act-tl-item"><div class="act-tl-icon act-tl-${action}">${icon}</div><div class="act-tl-content"><div class="act-tl-header"><span class="act-tl-desc">${esc(a.description || a.action || '')}</span></div><div class="act-tl-time">${timeStr}${a.user_name ? ' by ' + esc(a.user_name) : ''}</div></div></div>`
   }).join('')
   const moreBtn = !showAll && activities.length > maxItems ? `<div class="act-tl-more"><button class="btn btn-ghost btn-sm" data-action="showAllActivity" aria-label="Show ${activities.length - maxItems} more activities">Show ${activities.length - maxItems} more</button></div>` : ''
   return `<div class="act-timeline">${timelineItems}</div>${moreBtn}`

package/src/ui/engagement-grid-renderer.js

@@ -9,9 +9,12 @@ function engRow(e) {
   const year = esc(e.year || '-');
   const team = esc(e.team_name || e.team_id_display || e.team_id || '-');
   const deadline = e.deadline ? new Date(e.deadline).toLocaleDateString() : '-';
-  const stageLbl = STAGE_CONFIG.find(s => s.key === e.stage)?.label || (e.stage || '-');
-  return `<tr data-row data-navigate="/engagement/${esc(e.id)}" style="cursor:pointer">
-    <td data-col="name"><strong>${name}</strong></td>
+  const stageCfg = STAGE_CONFIG.find(s => s.key === e.stage);
+  const stageLbl = stageCfg?.label || (e.stage || '-');
+  // 247420 indicator-rail: 3px left edge tinted by stage color (replaces border)
+  const railColor = stageCfg?.color || (e.color || 'var(--panel-border,#eee5d3)');
+  return `<tr data-row data-navigate="/engagement/${esc(e.id)}" style="cursor:pointer" data-stage="${esc(e.stage || '')}">
+    <td data-col="name" style="box-shadow:inset 3px 0 0 ${railColor}"><strong>${name}</strong></td>
     <td data-col="client">${client}</td>
     <td data-col="type" class="eng-col-type">${type}</td>
     <td data-col="year" class="eng-col-year">${year}</td>
@@ -64,19 +67,19 @@ export function renderEngagementGrid(user, engagements, options = {}) {
 
   const emailReceiveDialog = `<div id="email-receive-dialog" class="dialog-overlay" style="display:none" role="dialog" aria-modal="true">
     <div class="dialog-panel" style="max-width:540px">
-      <div class="dialog-header"><span class="dialog-title">Receive Email</span><button class="dialog-close" onclick="document.getElementById('email-receive-dialog').style.display='none'">&times;</button></div>
+      <div class="dialog-header"><span class="dialog-title">Receive Email</span><button class="dialog-close" aria-label="Close dialog" data-dialog-close="email-receive-dialog">&times;</button></div>
       <div class="dialog-body">
         <div class="modal-form-group"><label>Email Content</label><textarea id="email-receive-content" class="form-input" rows="8" placeholder="Paste raw email content here..."></textarea></div>
         <div id="email-receive-result" style="display:none;margin-top:8px"></div>
       </div>
       <div class="dialog-footer">
-        <button class="btn btn-ghost btn-sm" onclick="document.getElementById('email-receive-dialog').style.display='none'">Cancel</button>
-        <button class="btn btn-primary btn-sm" onclick="submitEmailReceive()">Process Email</button>
+        <button class="btn btn-ghost btn-sm" data-dialog-close="email-receive-dialog">Cancel</button>
+        <button class="btn btn-primary btn-sm" data-action="submitEmailReceive">Process Email</button>
       </div>
     </div>
   </div>`;
 
-  const emailReceiveScript = `async function submitEmailReceive(){var content=document.getElementById('email-receive-content').value.trim();var res=document.getElementById('email-receive-result');if(!content){res.style.display='block';res.innerHTML='<div style="color:var(--color-danger);font-size:13px">Email content required.</div>';return}res.style.display='block';res.innerHTML='<div style="font-size:13px">Processing...</div>';try{var r=await fetch('/api/email/receive',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({content:content})});var d=await r.json();if(r.ok&&d.success){res.innerHTML='<div style="color:var(--color-success);font-size:13px">Email processed successfully.'+(d.engagement_id?' Matched engagement: '+d.engagement_id:'')+(d.message?' '+d.message:'')+'</div>'}else{res.innerHTML='<div style="color:var(--color-danger);font-size:13px">'+(d.error||d.message||'Failed to process email')+'</div>'}}catch(e){res.innerHTML='<div style="color:var(--color-danger);font-size:13px">Error: '+e.message+'</div>'}}`;
+  const emailReceiveScript = `window.submitEmailReceive=async function(){var content=document.getElementById('email-receive-content').value.trim();var res=document.getElementById('email-receive-result');if(!content){res.style.display='block';res.innerHTML='<div style="color:var(--color-danger);font-size:13px">Email content required.</div>';return}res.style.display='block';res.innerHTML='<div style="font-size:13px">Processing...</div>';try{var r=await fetch('/api/email/receive',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({content:content})});var d=await r.json();if(r.ok&&d.success){res.innerHTML='<div style="color:var(--color-success);font-size:13px">Email processed successfully.'+(d.engagement_id?' Matched engagement: '+d.engagement_id:'')+(d.message?' '+d.message:'')+'</div>'}else{res.innerHTML='<div style="color:var(--color-danger);font-size:13px">'+(d.error||d.message||'Failed to process email')+'</div>'}}catch(e){res.innerHTML='<div style="color:var(--color-danger);font-size:13px">Error: '+e.message+'</div>'}};`;
 
   const content = `<div class="page-header">
         <div><h1 class="page-title">Engagements</h1><p class="page-subtitle">${engagements.length} total engagements</p></div>
@@ -89,7 +92,7 @@ export function renderEngagementGrid(user, engagements, options = {}) {
           ${stageOpts ? `<div class="table-filter"><select data-filter="stage-raw" id="filter-stage"><option value="">All Stages</option>${stageOpts}</select></div>` : ''}
           ${teamOpts ? `<div class="table-filter"><select data-filter="team" id="filter-team"><option value="">All Teams</option>${teamOpts}</select></div>` : ''}
           ${yearOpts ? `<div class="table-filter"><select data-filter="year" id="filter-year"><option value="">All Years</option>${yearOpts}</select></div>` : ''}
-          <button class="btn btn-ghost btn-sm" onclick="document.getElementById('email-receive-dialog').style.display='flex'">Receive Email</button>
+          <button class="btn btn-ghost btn-sm" data-action="openDialog" data-args='["email-receive-dialog"]'>Receive Email</button>
           <span class="table-count" id="row-count">${engagements.length} items</span>
         </div>
         <table class="data-table">

package/src/ui/entity-renderer.js

@@ -63,7 +63,7 @@ function formatFieldValue(k, v, entityName) {
     return `<span class="pill ${cls}">${v ? v.charAt(0).toUpperCase() + v.slice(1) : '-'}</span>`
   }
   if (entityName === 'user' && k === 'email' && v) return `<a href="mailto:${v}" class="text-primary hover:underline">${v}</a>`
-  if (k === 'photo_url' && v && v.startsWith('http')) return `<img src="${v}" style="width:2.5rem;height:2.5rem;border-radius:50%;object-fit:cover" alt="avatar" onerror="this.style.display='none'/>`
+  if (k === 'photo_url' && v && v.startsWith('http')) return `<img src="${v}" style="width:2.5rem;height:2.5rem;border-radius:50%;object-fit:cover" alt="avatar" onerror="this.style.display='none'"/>`
   return fmtVal(v, k)
 }
 
@@ -125,9 +125,11 @@ export function renderEntityForm(entityName, item, spec, user, isNew = false, re
   const fields = spec?.fields || {}
   const lbl = (k, f, req) => `<label class="form-label" for="field-${k}">${f.label||k}${req ? '<span class="req">*</span>' : ''}</label>`
   const formFields = Object.entries(fields).filter(([k, f]) => k !== 'id' && !f.auto && !f.readOnly && !f.auto_generate && k !== 'password_hash').map(([k, f]) => {
-    const val = item?.[k] ?? f.default ?? ''
+    let val = item?.[k] ?? f.default ?? ''
     const req = f.required ? 'required' : ''
     const type = f.type === 'number' || f.type === 'int' || f.type === 'decimal' ? 'number' : f.type === 'email' ? 'email' : f.type === 'timestamp' || f.type === 'date' ? 'date' : f.type === 'bool' ? 'checkbox' : 'text'
+    // <input type=date> only populates from a strict YYYY-MM-DD; coerce a stored timestamp/ISO value so the existing date pre-fills (else it renders blank and saves empty).
+    if (type === 'date' && val) { const d = new Date(val); if (!isNaN(d)) val = d.toISOString().slice(0, 10) }
     const placeholder = `placeholder="Enter ${(f.label||k).toLowerCase()}"`
     if (entityName === 'user' && k === 'role') {
       const opts = ['partner','manager','clerk','client_admin','client_user'].map(o => `<option value="${o}" ${val===o?'selected':''}>${o.charAt(0).toUpperCase()+o.slice(1).replace('_',' ')}</option>`).join('')

package/src/ui/event-delegation.js

@@ -14,16 +14,246 @@ window.__events = window.__events || {
   }
 };
 
+// --- Dialog focus management -------------------------------------------------
+// A dialog is any visible [role=dialog] / .dialog-overlay / .modal / .modal-overlay.
+// We trap Tab within the topmost open dialog, move focus inside on open, and
+// restore focus to the opener on close. This works regardless of HOW the dialog
+// was opened (central openDialog OR a window.show*Dialog setter that flips
+// display=flex), because a MutationObserver watches visibility transitions.
+const dialogFocus = {
+  openerStack: [],
+  FOCUSABLE: 'button:not([disabled]), [href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+
+  isDialog(el) {
+    return el && el.nodeType === 1 && (
+      el.getAttribute('role') === 'dialog' ||
+      el.classList.contains('dialog-overlay') ||
+      el.classList.contains('dialog-backdrop') ||
+      el.classList.contains('modal') ||
+      el.classList.contains('modal-overlay')
+    );
+  },
+
+  isVisible(el) {
+    if (!el) return false;
+    // offsetParent is null for position:fixed elements even when visible, so we
+    // rely on computed display/visibility plus a non-zero box.
+    const cs = (typeof getComputedStyle === 'function') ? getComputedStyle(el) : null;
+    if (cs) {
+      if (cs.display === 'none' || cs.visibility === 'hidden') return false;
+      return el.getClientRects().length > 0;
+    }
+    return el.style.display !== 'none';
+  },
+
+  topOpenDialog() {
+    const dialogs = document.querySelectorAll('[role="dialog"], .dialog-overlay, .dialog-backdrop, .modal, .modal-overlay');
+    let top = null;
+    dialogs.forEach((d) => { if (this.isVisible(d)) top = d; });
+    return top;
+  },
+
+  focusables(container) {
+    return Array.from(container.querySelectorAll(this.FOCUSABLE))
+      .filter((el) => el.getClientRects().length > 0 || el === document.activeElement);
+  },
+
+  onOpen(dialog) {
+    // idempotent: openDialog and the MutationObserver can both report the same
+    // open; only the first wins so the opener stack stays balanced.
+    if (this.openerStack.some((s) => s.dialog === dialog)) return;
+    // remember the element that had focus so we can restore it on close
+    const opener = document.activeElement && document.activeElement !== document.body
+      ? document.activeElement : null;
+    this.openerStack.push({ dialog, opener });
+    const f = this.focusables(dialog);
+    const first = dialog.querySelector('[autofocus]') || f[0] || dialog;
+    setTimeout(() => { try { first.focus(); } catch (_) {} }, 0);
+  },
+
+  onClose(dialog) {
+    for (let i = this.openerStack.length - 1; i >= 0; i--) {
+      if (this.openerStack[i].dialog === dialog) {
+        const { opener } = this.openerStack[i];
+        this.openerStack.splice(i, 1);
+        if (opener && document.contains(opener)) {
+          try { opener.focus(); } catch (_) {}
+        }
+        break;
+      }
+    }
+  }
+};
+
+// Exposed for live debugging of dialog focus management via the browser verb.
+if (typeof window !== 'undefined') window.__dialogFocus = dialogFocus;
+
+// --- gmPrompt: styled replacement for native window.prompt ---------------------
+// Returns a Promise that resolves to the entered string (trimmed) or null if
+// cancelled. Lazily builds one reusable dialog so any page (incl. standalone) can
+// call window.gmPrompt({title, label, value, placeholder, type, confirmLabel}).
+// Participates in dialogFocus (Escape/Tab-trap/focus-restore) like any dialog.
+if (typeof window !== 'undefined' && !window.gmPrompt) {
+  window.gmPrompt = function (opts) {
+    opts = opts || {};
+    return new Promise((resolve) => {
+      let dlg = document.getElementById('gm-prompt-dialog');
+      if (!dlg) {
+        dlg = document.createElement('div');
+        dlg.id = 'gm-prompt-dialog';
+        dlg.className = 'dialog-overlay';
+        dlg.style.display = 'none';
+        dlg.setAttribute('role', 'dialog');
+        dlg.setAttribute('aria-modal', 'true');
+        dlg.setAttribute('aria-labelledby', 'gm-prompt-title');
+        dlg.innerHTML =
+          '<div class="dialog-panel" style="max-width:420px">' +
+          '<div class="dialog-header"><span class="dialog-title" id="gm-prompt-title"></span>' +
+          '<button class="dialog-close" type="button" aria-label="Close dialog" data-gm-prompt="cancel">&times;</button></div>' +
+          '<div class="dialog-body"><div class="modal-form-group">' +
+          '<label id="gm-prompt-label" for="gm-prompt-input"></label>' +
+          '<input id="gm-prompt-input" class="input input-bordered w-full"/></div>' +
+          '<div id="gm-prompt-error" class="text-error text-sm mt-1" style="display:none"></div></div>' +
+          '<div class="dialog-footer">' +
+          '<button class="btn btn-ghost btn-sm" type="button" data-gm-prompt="cancel">Cancel</button>' +
+          '<button class="btn btn-primary btn-sm" type="button" data-gm-prompt="ok"></button></div>';
+        document.body.appendChild(dlg);
+      }
+      const titleEl = dlg.querySelector('#gm-prompt-title');
+      const labelEl = dlg.querySelector('#gm-prompt-label');
+      const input = dlg.querySelector('#gm-prompt-input');
+      const errEl = dlg.querySelector('#gm-prompt-error');
+      const okBtn = dlg.querySelector('[data-gm-prompt="ok"]');
+      titleEl.textContent = opts.title || 'Enter value';
+      labelEl.textContent = opts.label || opts.title || 'Value';
+      input.type = opts.type || 'text';
+      input.value = opts.value != null ? String(opts.value) : '';
+      input.placeholder = opts.placeholder || '';
+      okBtn.textContent = opts.confirmLabel || 'OK';
+      errEl.style.display = 'none';
+      errEl.textContent = '';
+
+      let settled = false;
+      const finish = (val) => {
+        if (settled) return;
+        settled = true;
+        dlg.style.display = 'none';
+        dialogFocus.onClose(dlg);
+        dlg.removeEventListener('click', onClick);
+        input.removeEventListener('keydown', onKey);
+        dlg.removeEventListener('keydown', onEsc);
+        resolve(val);
+      };
+      const submit = () => {
+        const v = input.value.trim();
+        if (opts.required !== false && !v) {
+          errEl.textContent = (opts.label || 'Value') + ' is required.';
+          errEl.style.display = 'block';
+          return;
+        }
+        if (opts.validate) {
+          const msg = opts.validate(v);
+          if (msg) { errEl.textContent = msg; errEl.style.display = 'block'; return; }
+        }
+        finish(v);
+      };
+      const onClick = (e) => {
+        const b = e.target.closest('[data-gm-prompt]');
+        if (b) { e.preventDefault(); b.dataset.gmPrompt === 'ok' ? submit() : finish(null); return; }
+        if (e.target === dlg) finish(null); // backdrop click cancels
+      };
+      const onKey = (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); submit(); }
+      };
+      // Escape is handled by the central dialogFocus keydown (hides + onClose);
+      // we mirror it here so the Promise also resolves to null on Escape.
+      const onEsc = (e) => { if (e.key === 'Escape') finish(null); };
+      dlg.addEventListener('keydown', onEsc);
+      dlg.addEventListener('click', onClick);
+      input.addEventListener('keydown', onKey);
+      dlg.style.display = 'flex';
+      dialogFocus.onOpen(dlg);
+    });
+  };
+}
+
+// --- gmConfirm: styled replacement for native window.confirm ------------------
+// Returns a Promise that resolves to true (confirmed) or false (cancelled).
+// Lazily builds one reusable dialog so any page (incl. standalone) can call
+// window.gmConfirm({title, message, confirmLabel, cancelLabel, danger}).
+// Participates in dialogFocus (Escape/Tab-trap/focus-restore) like any dialog.
+// Backdrop click and Escape both resolve false (the safe default for a guard).
+if (typeof window !== 'undefined' && !window.gmConfirm) {
+  window.gmConfirm = function (opts) {
+    opts = opts || {};
+    return new Promise((resolve) => {
+      let dlg = document.getElementById('gm-confirm-dialog');
+      if (!dlg) {
+        dlg = document.createElement('div');
+        dlg.id = 'gm-confirm-dialog';
+        dlg.className = 'dialog-overlay';
+        dlg.style.display = 'none';
+        dlg.setAttribute('role', 'alertdialog');
+        dlg.setAttribute('aria-modal', 'true');
+        dlg.setAttribute('aria-labelledby', 'gm-confirm-title');
+        dlg.setAttribute('aria-describedby', 'gm-confirm-message');
+        dlg.innerHTML =
+          '<div class="dialog-panel" style="max-width:440px">' +
+          '<div class="dialog-header"><span class="dialog-title" id="gm-confirm-title"></span>' +
+          '<button class="dialog-close" type="button" aria-label="Close dialog" data-gm-confirm="cancel">&times;</button></div>' +
+          '<div class="dialog-body"><p id="gm-confirm-message" style="margin:0"></p></div>' +
+          '<div class="dialog-footer">' +
+          '<button class="btn btn-ghost btn-sm" type="button" data-gm-confirm="cancel"></button>' +
+          '<button class="btn btn-primary btn-sm" type="button" data-gm-confirm="ok"></button></div>';
+        document.body.appendChild(dlg);
+      }
+      const titleEl = dlg.querySelector('#gm-confirm-title');
+      const msgEl = dlg.querySelector('#gm-confirm-message');
+      const okBtn = dlg.querySelector('[data-gm-confirm="ok"]');
+      const cancelBtn = dlg.querySelector('[data-gm-confirm="cancel"].btn-ghost');
+      titleEl.textContent = opts.title || 'Are you sure?';
+      msgEl.textContent = opts.message || '';
+      okBtn.textContent = opts.confirmLabel || 'Confirm';
+      if (cancelBtn) cancelBtn.textContent = opts.cancelLabel || 'Cancel';
+      // danger styling for irreversible/destructive actions
+      okBtn.className = opts.danger ? 'btn btn-error btn-sm' : 'btn btn-primary btn-sm';
+
+      let settled = false;
+      const finish = (val) => {
+        if (settled) return;
+        settled = true;
+        dlg.style.display = 'none';
+        dialogFocus.onClose(dlg);
+        dlg.removeEventListener('click', onClick);
+        dlg.removeEventListener('keydown', onEsc);
+        resolve(val);
+      };
+      const onClick = (e) => {
+        const b = e.target.closest('[data-gm-confirm]');
+        if (b) { e.preventDefault(); finish(b.dataset.gmConfirm === 'ok'); return; }
+        if (e.target === dlg) finish(false); // backdrop click cancels
+      };
+      // Escape is handled by central dialogFocus keydown (hides + onClose);
+      // we mirror it here so the Promise also resolves to false on Escape.
+      const onEsc = (e) => { if (e.key === 'Escape') finish(false); };
+      dlg.addEventListener('keydown', onEsc);
+      dlg.addEventListener('click', onClick);
+      dlg.style.display = 'flex';
+      dialogFocus.onOpen(dlg);
+    });
+  };
+}
+
 const eventDelegation = {
   closeDialog(dialogId) {
     const el = document.getElementById(dialogId);
-    if (el) el.style.display = 'none';
+    if (el) { el.style.display = 'none'; dialogFocus.onClose(el); }
   },
 
   openDialog(e, target, params) {
     const id = params?.dialogId || (target?.dataset?.args ? JSON.parse(target.dataset.args)[0] : null);
     const el = id ? document.getElementById(id) : null;
-    if (el) el.style.display = 'flex';
+    if (el) { el.style.display = 'flex'; dialogFocus.onOpen(el); }
   },
 
   printPage() { window.print(); },
@@ -78,16 +308,27 @@ document.addEventListener('click', (e) => {
 
   if (target.classList.contains('dialog-overlay') && e.target === target) {
     target.style.display = 'none';
+    dialogFocus.onClose(target);
     return;
   }
 
   if (target.dataset.dialogClose) {
-    eventDelegation.closeDialog(target.dataset.dialogClose);
-    if (target.dataset.action) {
-      const params = target.dataset.params ? JSON.parse(target.dataset.params) : {};
-      window.__events.dispatch(target.dataset.action, e, target, params);
+    // Backdrop/overlay containers carry data-dialog-close to close on backdrop
+    // click; they must NOT close when the click originated inside the panel.
+    // Explicit close controls (buttons/links) close regardless of bubbling.
+    const isBackdropContainer = target.classList.contains('dialog-backdrop') || target.classList.contains('dialog-overlay') || target.classList.contains('modal') || target.classList.contains('modal-overlay');
+    if (isBackdropContainer && e.target !== target) {
+      // click bubbled up from inside the panel — ignore, let inner handlers run
+    } else {
+      eventDelegation.closeDialog(target.dataset.dialogClose);
+      if (target.dataset.action) {
+        const params = target.dataset.params ? JSON.parse(target.dataset.params) : {};
+        window.__events.dispatch(target.dataset.action, e, target, params);
+      }
+      return;
     }
-  } else if (target.dataset.navigate) {
+  }
+  if (target.dataset.navigate) {
     eventDelegation.navigate(target.dataset.navigate);
   } else if (target.dataset.toggle) {
     eventDelegation.toggle(target.dataset.toggle);
@@ -98,11 +339,110 @@ document.addEventListener('click', (e) => {
 }, true);
 
 document.addEventListener('keydown', (e) => {
+  // Escape closes the topmost open dialog and restores focus to its opener.
   if (e.key === 'Escape') {
-    const dialog = document.querySelector('[role="dialog"]:not([style*="display:none"])');
+    const dialog = dialogFocus.topOpenDialog();
     if (dialog) {
       dialog.style.display = 'none';
+      dialogFocus.onClose(dialog);
       e.preventDefault();
     }
+    return;
+  }
+
+  // Tab is trapped inside the topmost open dialog so focus cannot escape behind it.
+  if (e.key === 'Tab') {
+    const dialog = dialogFocus.topOpenDialog();
+    if (!dialog) return;
+    const f = dialogFocus.focusables(dialog);
+    if (!f.length) { e.preventDefault(); return; }
+    const first = f[0], last = f[f.length - 1];
+    const active = document.activeElement;
+    if (!dialog.contains(active)) { e.preventDefault(); first.focus(); return; }
+    if (e.shiftKey && active === first) { e.preventDefault(); last.focus(); }
+    else if (!e.shiftKey && active === last) { e.preventDefault(); first.focus(); }
+    return;
+  }
+
+  // Enter/Space activates a focused keyboard-navigable row ([data-navigate] on a
+  // non-natively-focusable element that we made focusable with tabindex).
+  if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {
+    const t = e.target;
+    if (t && t.dataset && t.dataset.navigate &&
+        t.tagName !== 'A' && t.tagName !== 'BUTTON' && t.tagName !== 'INPUT' &&
+        t.tagName !== 'SELECT' && t.tagName !== 'TEXTAREA') {
+      e.preventDefault();
+      eventDelegation.navigate(t.dataset.navigate);
+    }
   }
 });
+
+// Make non-natively-focusable navigable rows keyboard-operable: a <tr> (or any
+// non-link/button element) carrying data-navigate gets tabindex+role=link so it
+// can be focused and activated with Enter/Space (handled in the keydown above).
+function upgradeNavigableRows(root) {
+  (root || document).querySelectorAll('[data-navigate]').forEach((el) => {
+    const tag = el.tagName;
+    if (tag === 'A' || tag === 'BUTTON' || tag === 'INPUT' || tag === 'SELECT' || tag === 'TEXTAREA') return;
+    if (el.hasAttribute('tabindex')) return;
+    el.setAttribute('tabindex', '0');
+    el.setAttribute('role', 'link');
+  });
+}
+
+// A bare <button> defaults to type=submit; inside a <form> a close/action button
+// then submits the form by accident. We set type=button on every button that is
+// clearly not a submit control (carries a delegated action, or is not inside a
+// form), leaving genuine submit buttons (type=submit, or the form's own submit)
+// untouched.
+function upgradeButtonTypes(root) {
+  (root || document).querySelectorAll('button:not([type])').forEach((b) => {
+    const isAction = b.hasAttribute('data-action') || b.hasAttribute('data-dialog-close') ||
+      b.hasAttribute('data-navigate') || b.hasAttribute('data-toggle') ||
+      b.classList.contains('dialog-close');
+    if (isAction || !b.closest('form')) b.setAttribute('type', 'button');
+    // A button inside a form with no action attrs is left as-is so a real submit
+    // button keeps working; authors mark non-submit form buttons with data-action.
+  });
+}
+
+function upgradeAll(root) { upgradeNavigableRows(root); upgradeButtonTypes(root); }
+// The script may load from <head> (before the body markup exists) or at end of
+// body (after). Cover every ordering: run now, on DOMContentLoaded, on load, and
+// once more after a tick so server-rendered rows are definitely present. All
+// idempotent (queries are :not([type]) / :not([tabindex])).
+function runUpgrades() { try { upgradeAll(document); } catch (_) {} }
+runUpgrades();
+document.addEventListener('DOMContentLoaded', runUpgrades);
+window.addEventListener('load', runUpgrades);
+setTimeout(runUpgrades, 0);
+
+// Catch dialogs opened by direct display flips (window.show*Dialog setters that
+// bypass the central openDialog) and by direct display:none closes — so focus
+// management and the Tab-trap apply uniformly however a dialog is toggled.
+(function observeDialogs() {
+  if (typeof MutationObserver === 'undefined') return;
+  const wasVisible = new WeakMap();
+  const sync = (el) => {
+    if (!dialogFocus.isDialog(el)) return;
+    const now = dialogFocus.isVisible(el);
+    const before = wasVisible.get(el) || false;
+    if (now && !before) dialogFocus.onOpen(el);
+    else if (!now && before) dialogFocus.onClose(el);
+    wasVisible.set(el, now);
+  };
+  const observer = new MutationObserver((mutations) => {
+    for (const m of mutations) {
+      if (m.type === 'attributes' && (m.attributeName === 'style' || m.attributeName === 'class')) {
+        sync(m.target);
+      }
+    }
+  });
+  const start = () => {
+    document.querySelectorAll('[role="dialog"], .dialog-overlay, .dialog-backdrop, .modal, .modal-overlay')
+      .forEach((el) => { wasVisible.set(el, dialogFocus.isVisible(el)); });
+    observer.observe(document.body, { attributes: true, subtree: true, attributeFilter: ['style', 'class'] });
+  };
+  if (document.body) start();
+  else document.addEventListener('DOMContentLoaded', start);
+})();