@mappoh/nova 0.3.0 → 0.5.0

package/dist/notification-center/notification-center.js

@@ -0,0 +1,941 @@
+/**
+ * Nova Engine — Notification Center
+ *
+ * Persistent notification drawer with read/unread state, badge count,
+ * date grouping, and an accessible slide-out panel.
+ */
+import { trapFocus } from '../a11y/index';
+/* ---- Internal constants ---- */
+let counter = 0;
+function uid() {
+    return `nova-nc-${++counter}-${Date.now()}`;
+}
+const TYPE_COLORS = {
+    info: 'var(--color-status-info, #3b82f6)',
+    success: 'var(--color-status-success, #22c55e)',
+    warning: 'var(--color-status-warning, #f59e0b)',
+    error: 'var(--color-status-danger, #ef4444)',
+};
+const DEFAULT_ICONS = {
+    info: '\u2139\uFE0F',
+    success: '\u2705',
+    warning: '\u26A0\uFE0F',
+    error: '\u274C',
+};
+/* ---- Relative time helper ---- */
+function relativeTime(date) {
+    const now = Date.now();
+    const diff = now - date.getTime();
+    const seconds = Math.floor(diff / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+    if (seconds < 60)
+        return 'Just now';
+    if (minutes < 60)
+        return `${minutes} min ago`;
+    if (hours < 24)
+        return `${hours} hour${hours === 1 ? '' : 's'} ago`;
+    if (days === 1)
+        return 'Yesterday';
+    if (days < 7)
+        return `${days} days ago`;
+    return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
+}
+/* ---- Date grouping helper ---- */
+function getDateGroup(date) {
+    const now = new Date();
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const yesterday = new Date(today.getTime() - 86400000);
+    const target = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    if (target.getTime() === today.getTime())
+        return 'Today';
+    if (target.getTime() === yesterday.getTime())
+        return 'Yesterday';
+    return 'Older';
+}
+/* ---- SVG icon builders (no innerHTML) ---- */
+function createBellIcon() {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('width', '20');
+    svg.setAttribute('height', '20');
+    svg.setAttribute('viewBox', '0 0 24 24');
+    svg.setAttribute('fill', 'none');
+    svg.setAttribute('stroke', 'currentColor');
+    svg.setAttribute('stroke-width', '2');
+    svg.setAttribute('stroke-linecap', 'round');
+    svg.setAttribute('stroke-linejoin', 'round');
+    svg.setAttribute('aria-hidden', 'true');
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('d', 'M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9');
+    svg.appendChild(path);
+    const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path2.setAttribute('d', 'M13.73 21a2 2 0 0 1-3.46 0');
+    svg.appendChild(path2);
+    return svg;
+}
+function createCloseIcon() {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('width', '16');
+    svg.setAttribute('height', '16');
+    svg.setAttribute('viewBox', '0 0 24 24');
+    svg.setAttribute('fill', 'none');
+    svg.setAttribute('stroke', 'currentColor');
+    svg.setAttribute('stroke-width', '2');
+    svg.setAttribute('stroke-linecap', 'round');
+    svg.setAttribute('stroke-linejoin', 'round');
+    svg.setAttribute('aria-hidden', 'true');
+    const line1 = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+    line1.setAttribute('x1', '18');
+    line1.setAttribute('y1', '6');
+    line1.setAttribute('x2', '6');
+    line1.setAttribute('y2', '18');
+    svg.appendChild(line1);
+    const line2 = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+    line2.setAttribute('x1', '6');
+    line2.setAttribute('y1', '6');
+    line2.setAttribute('x2', '18');
+    line2.setAttribute('y2', '18');
+    svg.appendChild(line2);
+    return svg;
+}
+function createTrashIcon() {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('width', '14');
+    svg.setAttribute('height', '14');
+    svg.setAttribute('viewBox', '0 0 24 24');
+    svg.setAttribute('fill', 'none');
+    svg.setAttribute('stroke', 'currentColor');
+    svg.setAttribute('stroke-width', '2');
+    svg.setAttribute('stroke-linecap', 'round');
+    svg.setAttribute('stroke-linejoin', 'round');
+    svg.setAttribute('aria-hidden', 'true');
+    const poly = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
+    poly.setAttribute('points', '3 6 5 6 21 6');
+    svg.appendChild(poly);
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('d', 'M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2');
+    svg.appendChild(path);
+    return svg;
+}
+function createEmptyIcon() {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('width', '48');
+    svg.setAttribute('height', '48');
+    svg.setAttribute('viewBox', '0 0 24 24');
+    svg.setAttribute('fill', 'none');
+    svg.setAttribute('stroke', 'currentColor');
+    svg.setAttribute('stroke-width', '1.5');
+    svg.setAttribute('stroke-linecap', 'round');
+    svg.setAttribute('stroke-linejoin', 'round');
+    svg.setAttribute('aria-hidden', 'true');
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('d', 'M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9');
+    svg.appendChild(path);
+    const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path2.setAttribute('d', 'M13.73 21a2 2 0 0 1-3.46 0');
+    svg.appendChild(path2);
+    const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+    line.setAttribute('x1', '1');
+    line.setAttribute('y1', '1');
+    line.setAttribute('x2', '23');
+    line.setAttribute('y2', '23');
+    svg.appendChild(line);
+    return svg;
+}
+/* ---- Injected styles ---- */
+const STYLE_ID = 'nova-notification-center-styles';
+function injectStyles() {
+    if (document.getElementById(STYLE_ID))
+        return;
+    const s = document.createElement('style');
+    s.id = STYLE_ID;
+    s.textContent = `
+.nova-nc-trigger {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
+  border-radius: 10px;
+  background: var(--color-bg-elevated, rgba(20, 20, 20, 0.95));
+  color: var(--color-text-primary, #e5e5e5);
+  cursor: pointer;
+  padding: 0;
+  transition: background 0.15s ease, border-color 0.15s ease;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+.nova-nc-trigger:hover {
+  background: var(--color-bg-hover, rgba(255, 255, 255, 0.06));
+  border-color: var(--color-border-hover, rgba(255, 255, 255, 0.14));
+}
+.nova-nc-trigger:focus-visible {
+  outline: 2px solid var(--color-accent, #a78bfa);
+  outline-offset: 2px;
+}
+.nova-nc-badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  background: var(--color-status-danger, #ef4444);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 18px;
+  text-align: center;
+  pointer-events: none;
+  opacity: 0;
+  transform: scale(0.5);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.nova-nc-badge--visible {
+  opacity: 1;
+  transform: scale(1);
+}
+.nova-nc-badge--pulse {
+  animation: nova-nc-pulse 0.6s ease-out;
+}
+@keyframes nova-nc-pulse {
+  0% { transform: scale(1); }
+  40% { transform: scale(1.3); }
+  100% { transform: scale(1); }
+}
+.nova-nc-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 99998;
+  background: var(--color-bg-overlay, rgba(0, 0, 0, 0.4));
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+.nova-nc-backdrop--visible {
+  opacity: 1;
+}
+.nova-nc-panel {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: 99999;
+  width: min(400px, 90vw);
+  display: flex;
+  flex-direction: column;
+  background: var(--color-bg-elevated, rgba(22, 22, 22, 0.98));
+  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(16px);
+  color: var(--color-text-primary, #e5e5e5);
+  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.nova-nc-panel--right {
+  right: 0;
+  border-radius: 14px 0 0 14px;
+  transform: translateX(100%);
+}
+.nova-nc-panel--left {
+  left: 0;
+  border-radius: 0 14px 14px 0;
+  transform: translateX(-100%);
+}
+.nova-nc-panel--open {
+  transform: translateX(0);
+}
+.nova-nc-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
+  flex-shrink: 0;
+}
+.nova-nc-header__title {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+}
+.nova-nc-header__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.nova-nc-btn {
+  background: none;
+  border: 1px solid transparent;
+  color: var(--color-text-secondary, rgba(255, 255, 255, 0.5));
+  cursor: pointer;
+  padding: 4px 10px;
+  border-radius: 6px;
+  font: inherit;
+  font-size: 12px;
+  transition: color 0.15s ease, background 0.15s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.nova-nc-btn:hover {
+  color: var(--color-text-primary, #e5e5e5);
+  background: rgba(255, 255, 255, 0.06);
+}
+.nova-nc-btn:focus-visible {
+  outline: 2px solid var(--color-accent, #a78bfa);
+  outline-offset: 1px;
+}
+.nova-nc-close {
+  background: none;
+  border: none;
+  color: var(--color-text-secondary, rgba(255, 255, 255, 0.4));
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.15s ease, background 0.15s ease;
+}
+.nova-nc-close:hover {
+  color: var(--color-text-primary, #e5e5e5);
+  background: rgba(255, 255, 255, 0.06);
+}
+.nova-nc-close:focus-visible {
+  outline: 2px solid var(--color-accent, #a78bfa);
+  outline-offset: 1px;
+}
+.nova-nc-list {
+  flex: 1;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.nova-nc-group-header {
+  padding: 8px 20px 4px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-secondary, rgba(255, 255, 255, 0.4));
+}
+.nova-nc-item {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px 20px;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  overflow: hidden;
+}
+.nova-nc-item:hover {
+  background: var(--color-bg-hover, rgba(255, 255, 255, 0.04));
+}
+.nova-nc-item:focus-visible {
+  outline: 2px solid var(--color-accent, #a78bfa);
+  outline-offset: -2px;
+}
+.nova-nc-item--unread {
+  background: rgba(255, 255, 255, 0.02);
+}
+.nova-nc-item__border {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+}
+.nova-nc-item__icon {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  margin-top: 2px;
+}
+.nova-nc-item__body {
+  flex: 1;
+  min-width: 0;
+}
+.nova-nc-item__title {
+  font-size: 13px;
+  line-height: 1.4;
+  margin-bottom: 2px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.nova-nc-item__title-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.nova-nc-item--unread .nova-nc-item__title-text {
+  font-weight: 600;
+}
+.nova-nc-item__message {
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--color-text-secondary, rgba(255, 255, 255, 0.6));
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.nova-nc-item__time {
+  font-size: 11px;
+  color: var(--color-text-secondary, rgba(255, 255, 255, 0.35));
+  margin-top: 4px;
+}
+.nova-nc-item__unread-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-accent, #a78bfa);
+  flex-shrink: 0;
+  margin-top: 4px;
+}
+.nova-nc-item__action {
+  margin-top: 6px;
+  padding: 3px 10px;
+  border-radius: 5px;
+  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
+  background: transparent;
+  color: var(--color-text-primary, #e5e5e5);
+  font-size: 12px;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+.nova-nc-item__action:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+.nova-nc-item__action:focus-visible {
+  outline: 2px solid var(--color-accent, #a78bfa);
+  outline-offset: 1px;
+}
+.nova-nc-item__delete {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-status-danger, #ef4444);
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  opacity: 0;
+  transform: translateX(100%);
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+.nova-nc-item:hover .nova-nc-item__delete,
+.nova-nc-item__delete:focus-visible {
+  opacity: 1;
+  transform: translateX(0);
+}
+.nova-nc-item__delete:focus-visible {
+  outline: 2px solid var(--color-accent, #a78bfa);
+  outline-offset: -2px;
+}
+.nova-nc-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  color: var(--color-text-secondary, rgba(255, 255, 255, 0.3));
+  text-align: center;
+  gap: 12px;
+}
+.nova-nc-empty__text {
+  font-size: 14px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .nova-nc-panel,
+  .nova-nc-backdrop,
+  .nova-nc-badge,
+  .nova-nc-item__delete,
+  .nova-nc-item { transition: none; }
+  .nova-nc-badge--pulse { animation: none; }
+}`;
+    document.head.appendChild(s);
+}
+/* ---- Resolve trigger ---- */
+function resolveTrigger(trigger) {
+    if (typeof trigger === 'string') {
+        const el = document.querySelector(trigger);
+        if (!el)
+            throw new Error(`[Nova NotificationCenter] Trigger not found: ${trigger}`);
+        return el;
+    }
+    return trigger;
+}
+/* ---- Factory ---- */
+/** Create a notification center with persistent notifications, badge, and slide-out panel. */
+export function createNotificationCenter(options = {}) {
+    const { trigger: triggerOpt, position = 'right', maxItems = 100, groupByDate = true, onNotificationClick, onUnreadChange, } = options;
+    injectStyles();
+    let destroyed = false;
+    let panelOpen = false;
+    let previousFocus = null;
+    let releaseFocusTrap = null;
+    let updateTimer = null;
+    const notifications = [];
+    const listeners = [];
+    function on(target, evt, fn) {
+        target.addEventListener(evt, fn);
+        listeners.push([target, evt, fn]);
+    }
+    /* ---- Build trigger button ---- */
+    let triggerBtn = null;
+    let badgeEl = null;
+    let triggerHost = null;
+    if (triggerOpt !== undefined) {
+        triggerHost = resolveTrigger(triggerOpt);
+        triggerBtn = document.createElement('button');
+        triggerBtn.className = 'nova-nc-trigger';
+        triggerBtn.setAttribute('type', 'button');
+        triggerBtn.setAttribute('aria-label', 'Notifications');
+        triggerBtn.setAttribute('aria-expanded', 'false');
+        triggerBtn.setAttribute('aria-haspopup', 'true');
+        triggerBtn.appendChild(createBellIcon());
+        badgeEl = document.createElement('span');
+        badgeEl.className = 'nova-nc-badge';
+        badgeEl.setAttribute('aria-hidden', 'true');
+        triggerBtn.appendChild(badgeEl);
+        triggerHost.appendChild(triggerBtn);
+        on(triggerBtn, 'click', () => {
+            if (destroyed)
+                return;
+            instance.toggle();
+        });
+    }
+    /* ---- Build backdrop ---- */
+    const backdrop = document.createElement('div');
+    backdrop.className = 'nova-nc-backdrop';
+    on(backdrop, 'click', () => {
+        if (destroyed)
+            return;
+        instance.close();
+    });
+    /* ---- Build panel ---- */
+    const panel = document.createElement('div');
+    panel.className = `nova-nc-panel nova-nc-panel--${position}`;
+    panel.setAttribute('role', 'dialog');
+    panel.setAttribute('aria-label', 'Notification center');
+    panel.setAttribute('aria-modal', 'true');
+    // Header
+    const header = document.createElement('div');
+    header.className = 'nova-nc-header';
+    const headerTitle = document.createElement('h2');
+    headerTitle.className = 'nova-nc-header__title';
+    headerTitle.textContent = 'Notifications';
+    header.appendChild(headerTitle);
+    const headerActions = document.createElement('div');
+    headerActions.className = 'nova-nc-header__actions';
+    const markAllBtn = document.createElement('button');
+    markAllBtn.className = 'nova-nc-btn';
+    markAllBtn.setAttribute('type', 'button');
+    markAllBtn.textContent = 'Mark all read';
+    on(markAllBtn, 'click', () => {
+        if (destroyed)
+            return;
+        instance.markAllRead();
+    });
+    headerActions.appendChild(markAllBtn);
+    const closeBtn = document.createElement('button');
+    closeBtn.className = 'nova-nc-close';
+    closeBtn.setAttribute('type', 'button');
+    closeBtn.setAttribute('aria-label', 'Close notifications');
+    closeBtn.appendChild(createCloseIcon());
+    on(closeBtn, 'click', () => {
+        if (destroyed)
+            return;
+        instance.close();
+    });
+    headerActions.appendChild(closeBtn);
+    header.appendChild(headerActions);
+    panel.appendChild(header);
+    // List container
+    const listEl = document.createElement('div');
+    listEl.className = 'nova-nc-list';
+    panel.appendChild(listEl);
+    /* ---- Keyboard handler ---- */
+    function onKeyDown(e) {
+        if (!panelOpen || destroyed)
+            return;
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            instance.close();
+        }
+    }
+    on(document, 'keydown', onKeyDown);
+    /* ---- Badge update ---- */
+    function updateBadge(pulse = false) {
+        if (!badgeEl)
+            return;
+        const count = getUnreadCount();
+        if (count === 0) {
+            badgeEl.textContent = '';
+            badgeEl.classList.remove('nova-nc-badge--visible');
+        }
+        else {
+            badgeEl.textContent = count > 99 ? '99+' : String(count);
+            badgeEl.classList.add('nova-nc-badge--visible');
+            if (pulse) {
+                badgeEl.classList.remove('nova-nc-badge--pulse');
+                // Force reflow to restart the animation
+                void badgeEl.offsetWidth;
+                badgeEl.classList.add('nova-nc-badge--pulse');
+            }
+        }
+        onUnreadChange?.(count);
+    }
+    /* ---- Render notifications into panel ---- */
+    function renderList() {
+        // Clear existing content
+        while (listEl.firstChild) {
+            listEl.removeChild(listEl.firstChild);
+        }
+        if (notifications.length === 0) {
+            const empty = document.createElement('div');
+            empty.className = 'nova-nc-empty';
+            empty.appendChild(createEmptyIcon());
+            const text = document.createElement('div');
+            text.className = 'nova-nc-empty__text';
+            text.textContent = 'No notifications';
+            empty.appendChild(text);
+            listEl.appendChild(empty);
+            return;
+        }
+        if (groupByDate) {
+            const groups = new Map();
+            for (const n of notifications) {
+                const group = getDateGroup(n.timestamp);
+                const arr = groups.get(group);
+                if (arr) {
+                    arr.push(n);
+                }
+                else {
+                    groups.set(group, [n]);
+                }
+            }
+            // Maintain stable order: Today, Yesterday, Older
+            const order = ['Today', 'Yesterday', 'Older'];
+            for (const label of order) {
+                const items = groups.get(label);
+                if (!items || items.length === 0)
+                    continue;
+                const groupHeader = document.createElement('div');
+                groupHeader.className = 'nova-nc-group-header';
+                groupHeader.textContent = label;
+                listEl.appendChild(groupHeader);
+                for (const n of items) {
+                    listEl.appendChild(renderItem(n));
+                }
+            }
+        }
+        else {
+            for (const n of notifications) {
+                listEl.appendChild(renderItem(n));
+            }
+        }
+    }
+    function renderItem(n) {
+        const item = document.createElement('div');
+        item.className = 'nova-nc-item' + (n.read ? '' : ' nova-nc-item--unread');
+        item.setAttribute('role', 'article');
+        item.setAttribute('aria-label', n.title);
+        item.setAttribute('tabindex', '0');
+        item.dataset.id = n.id;
+        // Coloured left border
+        const border = document.createElement('div');
+        border.className = 'nova-nc-item__border';
+        border.style.background = TYPE_COLORS[n.type];
+        item.appendChild(border);
+        // Icon
+        const icon = document.createElement('div');
+        icon.className = 'nova-nc-item__icon';
+        icon.style.background = TYPE_COLORS[n.type].replace(')', ', 0.12)').replace('var(', 'color-mix(in srgb, ');
+        // Fallback: just use a subtle bg
+        icon.style.background = `rgba(128, 128, 128, 0.1)`;
+        icon.textContent = n.icon || DEFAULT_ICONS[n.type];
+        item.appendChild(icon);
+        // Body
+        const body = document.createElement('div');
+        body.className = 'nova-nc-item__body';
+        const title = document.createElement('div');
+        title.className = 'nova-nc-item__title';
+        const titleText = document.createElement('span');
+        titleText.className = 'nova-nc-item__title-text';
+        titleText.textContent = n.title;
+        title.appendChild(titleText);
+        body.appendChild(title);
+        const message = document.createElement('div');
+        message.className = 'nova-nc-item__message';
+        message.textContent = n.message;
+        body.appendChild(message);
+        const time = document.createElement('div');
+        time.className = 'nova-nc-item__time';
+        time.textContent = relativeTime(n.timestamp);
+        body.appendChild(time);
+        if (n.action) {
+            const actionBtn = document.createElement('button');
+            actionBtn.className = 'nova-nc-item__action';
+            actionBtn.setAttribute('type', 'button');
+            actionBtn.textContent = n.action.label;
+            const actionFn = n.action.onClick;
+            on(actionBtn, 'click', (e) => {
+                e.stopPropagation();
+                actionFn();
+            });
+            body.appendChild(actionBtn);
+        }
+        item.appendChild(body);
+        // Unread dot
+        if (!n.read) {
+            const dot = document.createElement('div');
+            dot.className = 'nova-nc-item__unread-dot';
+            item.appendChild(dot);
+        }
+        // Delete button (revealed on hover)
+        const deleteBtn = document.createElement('button');
+        deleteBtn.className = 'nova-nc-item__delete';
+        deleteBtn.setAttribute('type', 'button');
+        deleteBtn.setAttribute('aria-label', `Delete notification: ${n.title}`);
+        deleteBtn.appendChild(createTrashIcon());
+        on(deleteBtn, 'click', (e) => {
+            e.stopPropagation();
+            instance.remove(n.id);
+        });
+        item.appendChild(deleteBtn);
+        // Click handler — mark as read + callback
+        on(item, 'click', () => {
+            if (destroyed)
+                return;
+            if (!n.read) {
+                instance.markRead(n.id);
+            }
+            onNotificationClick?.(n);
+        });
+        // Enter/Space activates
+        on(item, 'keydown', ((e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                item.click();
+            }
+        }));
+        return item;
+    }
+    /* ---- Unread count ---- */
+    function getUnreadCount() {
+        let count = 0;
+        for (const n of notifications) {
+            if (!n.read)
+                count++;
+        }
+        return count;
+    }
+    /* ---- Timestamp refresh timer ---- */
+    function startTimestampRefresh() {
+        if (updateTimer !== null)
+            return;
+        updateTimer = setInterval(() => {
+            if (panelOpen && !destroyed) {
+                const timeEls = listEl.querySelectorAll('.nova-nc-item__time');
+                timeEls.forEach((el, i) => {
+                    if (i < notifications.length) {
+                        el.textContent = relativeTime(notifications[i].timestamp);
+                    }
+                });
+            }
+        }, 30000); // Refresh every 30 seconds
+    }
+    function stopTimestampRefresh() {
+        if (updateTimer !== null) {
+            clearInterval(updateTimer);
+            updateTimer = null;
+        }
+    }
+    /* ---- Panel open / close ---- */
+    function openPanel() {
+        if (panelOpen || destroyed)
+            return;
+        panelOpen = true;
+        previousFocus = document.activeElement;
+        document.body.appendChild(backdrop);
+        document.body.appendChild(panel);
+        document.body.style.overflow = 'hidden';
+        renderList();
+        requestAnimationFrame(() => {
+            backdrop.classList.add('nova-nc-backdrop--visible');
+            panel.classList.add('nova-nc-panel--open');
+        });
+        if (triggerBtn) {
+            triggerBtn.setAttribute('aria-expanded', 'true');
+        }
+        // Activate focus trap after transition
+        releaseFocusTrap = trapFocus(panel);
+        startTimestampRefresh();
+    }
+    function closePanel() {
+        if (!panelOpen || destroyed)
+            return;
+        panelOpen = false;
+        backdrop.classList.remove('nova-nc-backdrop--visible');
+        panel.classList.remove('nova-nc-panel--open');
+        if (triggerBtn) {
+            triggerBtn.setAttribute('aria-expanded', 'false');
+        }
+        if (releaseFocusTrap) {
+            releaseFocusTrap();
+            releaseFocusTrap = null;
+        }
+        stopTimestampRefresh();
+        const finish = () => {
+            if (backdrop.parentNode)
+                backdrop.remove();
+            if (panel.parentNode)
+                panel.remove();
+            document.body.style.overflow = '';
+            previousFocus?.focus();
+        };
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            finish();
+        }
+        else {
+            panel.addEventListener('transitionend', finish, { once: true });
+            setTimeout(finish, 300); // fallback
+        }
+    }
+    /* ---- Instance ---- */
+    const instance = {
+        add(partial) {
+            if (destroyed)
+                throw new Error('[Nova NotificationCenter] Instance has been destroyed');
+            const n = {
+                id: uid(),
+                type: partial.type,
+                title: partial.title,
+                message: partial.message,
+                timestamp: new Date(),
+                read: false,
+                action: partial.action,
+                icon: partial.icon,
+            };
+            // Add to the front (newest first)
+            notifications.unshift(n);
+            // Enforce max
+            while (notifications.length > maxItems) {
+                notifications.pop();
+            }
+            updateBadge(!panelOpen);
+            if (panelOpen) {
+                renderList();
+            }
+            return n;
+        },
+        info(title, message) {
+            return instance.add({ type: 'info', title, message });
+        },
+        success(title, message) {
+            return instance.add({ type: 'success', title, message });
+        },
+        warning(title, message) {
+            return instance.add({ type: 'warning', title, message });
+        },
+        error(title, message) {
+            return instance.add({ type: 'error', title, message });
+        },
+        markRead(id) {
+            if (destroyed)
+                return;
+            for (const n of notifications) {
+                if (n.id === id) {
+                    n.read = true;
+                    break;
+                }
+            }
+            updateBadge();
+            if (panelOpen)
+                renderList();
+        },
+        markAllRead() {
+            if (destroyed)
+                return;
+            for (const n of notifications) {
+                n.read = true;
+            }
+            updateBadge();
+            if (panelOpen)
+                renderList();
+        },
+        remove(id) {
+            if (destroyed)
+                return;
+            const idx = notifications.findIndex((n) => n.id === id);
+            if (idx !== -1) {
+                notifications.splice(idx, 1);
+                updateBadge();
+                if (panelOpen)
+                    renderList();
+            }
+        },
+        clear() {
+            if (destroyed)
+                return;
+            notifications.length = 0;
+            updateBadge();
+            if (panelOpen)
+                renderList();
+        },
+        getUnreadCount,
+        getAll() {
+            return notifications.slice();
+        },
+        open: openPanel,
+        close: closePanel,
+        toggle() {
+            if (panelOpen)
+                closePanel();
+            else
+                openPanel();
+        },
+        isOpen() {
+            return panelOpen;
+        },
+        destroy() {
+            if (destroyed)
+                return;
+            destroyed = true;
+            stopTimestampRefresh();
+            if (panelOpen) {
+                if (releaseFocusTrap) {
+                    releaseFocusTrap();
+                    releaseFocusTrap = null;
+                }
+                if (backdrop.parentNode)
+                    backdrop.remove();
+                if (panel.parentNode)
+                    panel.remove();
+                document.body.style.overflow = '';
+            }
+            if (triggerBtn && triggerBtn.parentNode) {
+                triggerBtn.remove();
+            }
+            for (const [t, e, fn] of listeners) {
+                t.removeEventListener(e, fn);
+            }
+            listeners.length = 0;
+            notifications.length = 0;
+        },
+    };
+    return instance;
+}
+//# sourceMappingURL=notification-center.js.map