electron-notify-manager 1.0.0

package/renderer/notification.ts

@@ -0,0 +1,150 @@
+type CloseReason = 'timeout' | 'manual';
+
+interface RepositionPayload {
+  id: string;
+  y: number;
+}
+
+interface RendererApi {
+  sendClose: (id: string) => void;
+  sendClick: (id: string) => void;
+  onReposition: (handler: (payload: RepositionPayload) => void) => void;
+}
+
+declare global {
+  interface Window {
+    electronNotify: RendererApi;
+  }
+}
+
+function getParam(key: string, fallback = ''): string {
+  const sp = new URLSearchParams(window.location.search);
+  const v = sp.get(key);
+  return v === null ? fallback : v;
+}
+
+function getNumberParam(key: string, fallback: number): number {
+  const raw = getParam(key, '');
+  const n = Number(raw);
+  return Number.isFinite(n) ? n : fallback;
+}
+
+const id = getParam('id', '');
+const title = getParam('title', '');
+const description = getParam('description', '');
+const image = getParam('image', '');
+const duration = Math.max(0, Math.floor(getNumberParam('duration', 4000)));
+
+const root = document.getElementById('root');
+const titleEl = document.getElementById('title');
+const descEl = document.getElementById('desc');
+const closeBtn = document.getElementById('closeBtn');
+const imgEl = document.getElementById('image');
+const defaultIconEl = document.getElementById('defaultIcon');
+const progressEl = document.getElementById('progress');
+
+if (
+  root === null ||
+  titleEl === null ||
+  descEl === null ||
+  closeBtn === null ||
+  imgEl === null ||
+  defaultIconEl === null ||
+  progressEl === null
+) {
+  throw new Error('Notification UI elements missing from notification.html');
+}
+
+titleEl.textContent = title;
+descEl.textContent = description;
+
+const hasImage = typeof image === 'string' && image.trim().length > 0;
+if (hasImage) {
+  (imgEl as HTMLImageElement).src = image;
+  (imgEl as HTMLElement).style.display = 'block';
+  (defaultIconEl as HTMLElement).style.display = 'none';
+} else {
+  (imgEl as HTMLImageElement).removeAttribute('src');
+  (imgEl as HTMLElement).style.display = 'none';
+  (defaultIconEl as HTMLElement).style.display = 'block';
+}
+
+let closing = false;
+let autoTimer: number | null = null;
+
+function enter(): void {
+  requestAnimationFrame(() => {
+    root.classList.remove('entering');
+    root.classList.add('entered');
+  });
+}
+
+function requestClose(_reason: CloseReason): void {
+  if (closing) return;
+  closing = true;
+
+  if (autoTimer !== null) {
+    window.clearTimeout(autoTimer);
+    autoTimer = null;
+  }
+
+  root.classList.remove('entered');
+  root.classList.add('exiting');
+
+  window.setTimeout(() => {
+    window.electronNotify.sendClose(id);
+  }, 220);
+
+  (root as HTMLElement).style.pointerEvents = 'none';
+}
+
+function startProgress(): void {
+  if (duration <= 0) {
+    (progressEl as HTMLElement).style.opacity = '0';
+    return;
+  }
+
+  (progressEl as HTMLElement).style.opacity = '1';
+  progressEl.animate([{ transform: 'scaleX(1)' }, { transform: 'scaleX(0)' }], {
+    duration,
+    easing: 'linear',
+    fill: 'forwards'
+  });
+
+  autoTimer = window.setTimeout(() => requestClose('timeout'), duration);
+}
+
+closeBtn.addEventListener('click', (e: MouseEvent) => {
+  e.preventDefault();
+  e.stopPropagation();
+  requestClose('manual');
+});
+
+root.addEventListener('click', () => {
+  if (closing) return;
+  window.electronNotify.sendClick(id);
+  requestClose('manual');
+});
+
+root.addEventListener('keydown', (e: KeyboardEvent) => {
+  if (e.key === 'Enter' || e.key === ' ') {
+    e.preventDefault();
+    (root as HTMLElement).click();
+  } else if (e.key === 'Escape') {
+    e.preventDefault();
+    requestClose('manual');
+  }
+});
+
+window.electronNotify.onReposition((_payload) => {
+  root.animate([{ transform: 'translateY(-2px)' }, { transform: 'translateY(0px)' }], {
+    duration: 240,
+    easing: 'ease-out'
+  });
+});
+
+enter();
+startProgress();
+
+export {};
+

package/renderer/preload.js

@@ -0,0 +1,38 @@
+/* eslint-disable */
+'use strict';
+
+const { contextBridge, ipcRenderer } = require('electron');
+
+contextBridge.exposeInMainWorld('electronNotify', {
+  sendClose: (id) => ipcRenderer.send('notification:close', id),
+  sendClick: (id) => ipcRenderer.send('notification:click', id),
+  onReposition: (handler) => {
+    ipcRenderer.on('notification:reposition', (_event, payload) => {
+      if (!payload || typeof payload !== 'object') return;
+      if (typeof payload.id !== 'string') return;
+      if (typeof payload.y !== 'number') return;
+      handler({ id: payload.id, y: payload.y });
+    });
+  },
+  onUpdate: (handler) => {
+    ipcRenderer.on('notification:update', (_event, payload) => {
+      if (!payload || typeof payload !== 'object') return;
+      if (typeof payload.id !== 'string') return;
+      if (!payload.updates || typeof payload.updates !== 'object') return;
+      const u = payload.updates;
+      const updates = {};
+      if (typeof u.progress === 'number') updates.progress = u.progress;
+      if (typeof u.loadingText === 'string') updates.loadingText = u.loadingText;
+      if (typeof u.description === 'string') updates.description = u.description;
+      handler({ id: payload.id, updates });
+    });
+  },
+  onTheme: (handler) => {
+    ipcRenderer.on('notification:theme', (_event, payload) => {
+      if (!payload || typeof payload !== 'object') return;
+      if (payload.theme !== 'dark' && payload.theme !== 'light') return;
+      handler({ theme: payload.theme });
+    });
+  }
+});
+

package/renderer/preload.ts

@@ -0,0 +1,56 @@
+import { contextBridge, ipcRenderer } from 'electron';
+
+const IPC_CHANNELS = {
+  NOTIFICATION_CLOSE: 'notification:close',
+  NOTIFICATION_CLICK: 'notification:click',
+  NOTIFICATION_REPOSITION: 'notification:reposition',
+  NOTIFICATION_UPDATE: 'notification:update',
+  NOTIFICATION_THEME: 'notification:theme',
+} as const;
+
+export interface RendererApi {
+  sendClose: (id: string) => void;
+  sendClick: (id: string) => void;
+  onReposition: (handler: (payload: { id: string; y: number }) => void) => void;
+  onUpdate: (handler: (payload: { id: string; updates: { progress?: number; loadingText?: string; description?: string } }) => void) => void;
+  onTheme: (handler: (payload: { theme: 'dark' | 'light' }) => void) => void;
+}
+
+const api: RendererApi = {
+  sendClose: (id: string) => ipcRenderer.send(IPC_CHANNELS.NOTIFICATION_CLOSE, id),
+  sendClick: (id: string) => ipcRenderer.send(IPC_CHANNELS.NOTIFICATION_CLICK, id),
+  onReposition: (handler) => {
+    ipcRenderer.on(IPC_CHANNELS.NOTIFICATION_REPOSITION, (_event, payload: unknown) => {
+      if (typeof payload !== 'object' || payload === null) return;
+      const maybe = payload as { id?: unknown; y?: unknown };
+      if (typeof maybe.id !== 'string') return;
+      if (typeof maybe.y !== 'number') return;
+      handler({ id: maybe.id, y: maybe.y });
+    });
+  },
+  onUpdate: (handler) => {
+    ipcRenderer.on(IPC_CHANNELS.NOTIFICATION_UPDATE, (_event, payload: unknown) => {
+      if (typeof payload !== 'object' || payload === null) return;
+      const maybe = payload as { id?: unknown; updates?: unknown };
+      if (typeof maybe.id !== 'string') return;
+      if (typeof maybe.updates !== 'object' || maybe.updates === null) return;
+      const u = maybe.updates as { progress?: unknown; loadingText?: unknown; description?: unknown };
+      const updates: { progress?: number; loadingText?: string; description?: string } = {};
+      if (typeof u.progress === 'number') updates.progress = u.progress;
+      if (typeof u.loadingText === 'string') updates.loadingText = u.loadingText;
+      if (typeof u.description === 'string') updates.description = u.description;
+      handler({ id: maybe.id, updates });
+    });
+  },
+  onTheme: (handler) => {
+    ipcRenderer.on(IPC_CHANNELS.NOTIFICATION_THEME, (_event, payload: unknown) => {
+      if (typeof payload !== 'object' || payload === null) return;
+      const maybe = payload as { theme?: unknown };
+      if (maybe.theme !== 'dark' && maybe.theme !== 'light') return;
+      handler({ theme: maybe.theme });
+    });
+  },
+};
+
+contextBridge.exposeInMainWorld('electronNotify', api);
+

package/renderer/scripts/animationController.ts

@@ -0,0 +1,12 @@
+export function enter(el: HTMLElement): void {
+  requestAnimationFrame(() => {
+    el.classList.add('entered');
+    el.classList.remove('entering');
+  });
+}
+
+export function exit(el: HTMLElement): void {
+  el.classList.add('exiting');
+  el.classList.remove('entered');
+}
+

package/renderer/scripts/icons.ts

@@ -0,0 +1,36 @@
+export type NotificationVariant =
+  | 'default'
+  | 'success'
+  | 'error'
+  | 'warning'
+  | 'loading'
+  | 'progress';
+
+export const ICONS: Record<NotificationVariant, string> = {
+  default: `<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path d="M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z" stroke="currentColor" stroke-width="2"/>
+    <path d="M12 10v7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+    <path d="M12 7h.01" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
+  </svg>`,
+  success: `<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path d="M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z" stroke="currentColor" stroke-width="2"/>
+    <path d="M7.5 12.5l3 3 6-7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>`,
+  error: `<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path d="M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z" stroke="currentColor" stroke-width="2"/>
+    <path d="M8.5 8.5l7 7M15.5 8.5l-7 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/>
+  </svg>`,
+  warning: `<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path d="M12 3l10 18H2L12 3z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
+    <path d="M12 9v5" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/>
+    <path d="M12 17h.01" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
+  </svg>`,
+  loading: `<svg class="spin" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path d="M12 3a9 9 0 1 0 9 9" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/>
+  </svg>`,
+  progress: `<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path d="M4 12a8 8 0 1 0 8-8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+    <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>`,
+};
+

package/renderer/scripts/notification.js

@@ -0,0 +1,188 @@
+/* eslint-disable */
+'use strict';
+
+function getParam(key, fallback = '') {
+  const sp = new URLSearchParams(window.location.search);
+  const v = sp.get(key);
+  return v == null ? fallback : v;
+}
+
+function getNumberParam(key, fallback) {
+  const raw = getParam(key, '');
+  const n = Number(raw);
+  return Number.isFinite(n) ? n : fallback;
+}
+
+function clampProgress(value) {
+  if (Number.isNaN(value)) return 0;
+  return Math.max(0, Math.min(100, Math.round(value)));
+}
+
+const ICONS = {
+  default: `<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path d="M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z" stroke="currentColor" stroke-width="2"/>
+    <path d="M12 10v7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+    <path d="M12 7h.01" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
+  </svg>`,
+  success: `<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path d="M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z" stroke="currentColor" stroke-width="2"/>
+    <path d="M7.5 12.5l3 3 6-7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>`,
+  error: `<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path d="M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z" stroke="currentColor" stroke-width="2"/>
+    <path d="M8.5 8.5l7 7M15.5 8.5l-7 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/>
+  </svg>`,
+  warning: `<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path d="M12 3l10 18H2L12 3z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
+    <path d="M12 9v5" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/>
+    <path d="M12 17h.01" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
+  </svg>`,
+  loading: `<svg class="spin" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path d="M12 3a9 9 0 1 0 9 9" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/>
+  </svg>`,
+  progress: `<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path d="M4 12a8 8 0 1 0 8-8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+    <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>`
+};
+
+const id = getParam('id', '');
+const title = getParam('title', '');
+const description = getParam('description', '');
+const image = getParam('image', '');
+const duration = Math.max(0, Math.floor(getNumberParam('duration', 4000)));
+const variant = getParam('variant', 'default');
+const themeResolved = getParam('themeResolved', 'dark');
+const progress = getNumberParam('progress', 0);
+const progressLabel = getParam('progressLabel', '');
+const loadingText = getParam('loadingText', '');
+
+const root = document.getElementById('notification');
+const titleEl = document.getElementById('title');
+const descEl = document.getElementById('desc');
+const closeBtn = document.getElementById('closeBtn');
+const iconSvg = document.getElementById('iconSvg');
+const imgEl = document.getElementById('image');
+const bottomBar = document.getElementById('bottomBar');
+const bottomBarFill = document.getElementById('bottomBarFill');
+const progressInfo = document.getElementById('progressInfo');
+const progressLabelEl = document.getElementById('progressLabel');
+const progressPercentEl = document.getElementById('progressPercent');
+
+titleEl.textContent = title;
+descEl.textContent = description;
+
+root.dataset.variant = variant;
+root.dataset.theme = themeResolved;
+
+const hasImage = typeof image === 'string' && image.trim().length > 0;
+if (hasImage) {
+  imgEl.src = image;
+  imgEl.style.display = 'block';
+  iconSvg.innerHTML = '';
+} else {
+  imgEl.removeAttribute('src');
+  imgEl.style.display = 'none';
+  iconSvg.innerHTML = ICONS[variant] || ICONS.default;
+}
+
+function setProgressUI(p) {
+  const pct = clampProgress(p);
+  progressLabelEl.textContent = progressLabel || '';
+  progressPercentEl.textContent = `${pct}%`;
+  bottomBarFill.style.transform = `scaleX(${pct / 100})`;
+}
+
+let closing = false;
+let autoTimer = null;
+
+function enter() {
+  requestAnimationFrame(() => {
+    root.classList.remove('entering');
+    root.classList.add('entered');
+  });
+}
+
+function requestClose() {
+  if (closing) return;
+  closing = true;
+  if (autoTimer) {
+    clearTimeout(autoTimer);
+    autoTimer = null;
+  }
+  root.classList.remove('entered');
+  root.classList.add('exiting');
+  setTimeout(() => window.electronNotify.sendClose(id), 220);
+  root.style.pointerEvents = 'none';
+}
+
+function startBottomBar() {
+  if (variant === 'loading') {
+    bottomBar.style.display = 'none';
+    return;
+  }
+
+  if (variant === 'progress') {
+    progressInfo.style.display = 'flex';
+    setProgressUI(progress);
+    return;
+  }
+
+  if (duration <= 0) {
+    bottomBar.style.display = 'none';
+    return;
+  }
+
+  bottomBar.style.display = 'block';
+  bottomBarFill.style.transform = 'scaleX(1)';
+  bottomBarFill.animate([{ transform: 'scaleX(1)' }, { transform: 'scaleX(0)' }], {
+    duration,
+    easing: 'linear',
+    fill: 'forwards'
+  });
+  autoTimer = setTimeout(() => requestClose(), duration);
+}
+
+closeBtn.addEventListener('click', (e) => {
+  e.preventDefault();
+  e.stopPropagation();
+  requestClose();
+});
+
+root.addEventListener('click', () => {
+  if (closing) return;
+  window.electronNotify.sendClick(id);
+  requestClose();
+});
+
+root.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter' || e.key === ' ') {
+    e.preventDefault();
+    root.click();
+  } else if (e.key === 'Escape') {
+    e.preventDefault();
+    requestClose();
+  }
+});
+
+window.electronNotify.onReposition((_payload) => {
+  root.animate([{ transform: 'translateY(-2px)' }, { transform: 'translateY(0px)' }], {
+    duration: 240,
+    easing: 'ease-out'
+  });
+});
+
+window.electronNotify.onUpdate((payload) => {
+  if (payload.id !== id) return;
+  if (typeof payload.updates.description === 'string') descEl.textContent = payload.updates.description;
+  if (typeof payload.updates.loadingText === 'string') descEl.textContent = payload.updates.loadingText;
+  if (typeof payload.updates.progress === 'number') setProgressUI(payload.updates.progress);
+});
+
+window.electronNotify.onTheme((payload) => {
+  root.dataset.theme = payload.theme;
+});
+
+enter();
+startBottomBar();
+

package/renderer/scripts/progressBar.ts

@@ -0,0 +1,10 @@
+export function clampProgress(value: number): number {
+  if (Number.isNaN(value)) return 0;
+  return Math.max(0, Math.min(100, Math.round(value)));
+}
+
+export function setProgressFill(fillEl: HTMLElement, percent: number): void {
+  const p = clampProgress(percent);
+  fillEl.style.transform = `scaleX(${p / 100})`;
+}
+

package/renderer/styles/animations.css

@@ -0,0 +1,28 @@
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes success-bounce {
+  0% { transform: translateX(var(--enter-x, 22px)) scale(0.8); }
+  60% { transform: translateX(0px) scale(1.05); }
+  100% { transform: translateX(0px) scale(1); }
+}
+
+@keyframes error-shake {
+  0% { transform: translateX(var(--enter-x, 22px)); }
+  40% { transform: translateX(-4px); }
+  70% { transform: translateX(4px); }
+  100% { transform: translateX(0px); }
+}
+
+@keyframes warning-pulse {
+  0%, 100% { filter: saturate(100%); }
+  50% { filter: saturate(170%); }
+}
+
+.spin {
+  animation: spin 900ms linear infinite;
+  transform-origin: 50% 50%;
+}
+