electron-notify-manager 1.0.0

package/dist/src/utils/themeDetector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeDetector.js","sourceRoot":"","sources":["../../../src/utils/themeDetector.ts"],"names":[],"mappings":";;AAGA,oCAKC;AARD,uCAAuC;AAGvC,SAAgB,YAAY,CAAC,SAAoB;IAC/C,IAAI,SAAS,KAAK,MAAM,EAAE,CAAC;QACzB,OAAO,sBAAW,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IAC5D,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC"}

package/dist/src/utils/validators.d.ts

@@ -0,0 +1,10 @@
+import type { NotificationManagerOptions } from '../types/config.types';
+import type { NotificationOptions } from '../types/notification.types';
+import type { NotificationPosition } from '../types/position.types';
+import type { NotificationVariant, ThemeMode } from '../types/theme.types';
+export declare function isValidPosition(value: unknown): value is NotificationPosition;
+export declare function isValidVariant(value: unknown): value is NotificationVariant;
+export declare function isValidThemeMode(value: unknown): value is ThemeMode;
+export declare function validateManagerOptions(options: unknown): asserts options is NotificationManagerOptions;
+export declare function validateNotificationOptions(options: unknown): asserts options is NotificationOptions;
+//# sourceMappingURL=validators.d.ts.map

package/dist/src/utils/validators.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validators.d.ts","sourceRoot":"","sources":["../../../src/utils/validators.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAE3E,wBAAgB,eAAe,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,oBAAoB,CAE7E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,mBAAmB,CAE3E;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,SAAS,CAEnE;AAkBD,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,OAAO,IAAI,0BAA0B,CAuBtG;AAED,wBAAgB,2BAA2B,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,OAAO,IAAI,mBAAmB,CA8CpG"}

package/dist/src/utils/validators.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isValidPosition = isValidPosition;
+exports.isValidVariant = isValidVariant;
+exports.isValidThemeMode = isValidThemeMode;
+exports.validateManagerOptions = validateManagerOptions;
+exports.validateNotificationOptions = validateNotificationOptions;
+const constants_1 = require("../constants");
+const errors_1 = require("../errors");
+function isValidPosition(value) {
+    return typeof value === 'string' && constants_1.VALID_POSITIONS.includes(value);
+}
+function isValidVariant(value) {
+    return typeof value === 'string' && constants_1.VALID_VARIANTS.includes(value);
+}
+function isValidThemeMode(value) {
+    return typeof value === 'string' && constants_1.VALID_THEME_MODES.includes(value);
+}
+function assertNumber(name, value) {
+    if (typeof value !== 'number' || !Number.isFinite(value)) {
+        throw new errors_1.NotificationError(`${name} must be a finite number`, errors_1.ErrorCode.INVALID_OPTIONS);
+    }
+}
+function assertNonNegativeInt(name, value) {
+    assertNumber(name, value);
+    if (value < 0) {
+        throw new errors_1.NotificationError(`${name} must be >= 0`, errors_1.ErrorCode.INVALID_OPTIONS);
+    }
+    if (!Number.isInteger(value)) {
+        throw new errors_1.NotificationError(`${name} must be an integer`, errors_1.ErrorCode.INVALID_OPTIONS);
+    }
+}
+function validateManagerOptions(options) {
+    if (typeof options !== 'object' || options === null) {
+        throw new errors_1.NotificationError('Manager options must be an object', errors_1.ErrorCode.INVALID_OPTIONS);
+    }
+    const o = options;
+    if (o.position !== undefined && !isValidPosition(o.position)) {
+        throw new errors_1.NotificationError(`Invalid position: ${String(o.position)}`, errors_1.ErrorCode.INVALID_POSITION);
+    }
+    const numeric = [
+        { key: 'WIDTH', name: 'width', field: 'width' },
+        { key: 'HEIGHT', name: 'height', field: 'height' },
+        { key: 'MARGIN', name: 'margin', field: 'margin' },
+        { key: 'GAP', name: 'gap', field: 'gap' },
+    ];
+    for (const n of numeric) {
+        if (o[n.name] !== undefined) {
+            assertNonNegativeInt(n.name, o[n.name]);
+        }
+    }
+}
+function validateNotificationOptions(options) {
+    if (typeof options !== 'object' || options === null) {
+        throw new errors_1.NotificationError('Notification options must be an object', errors_1.ErrorCode.INVALID_OPTIONS);
+    }
+    const o = options;
+    if (typeof o.title !== 'string' || o.title.trim().length === 0) {
+        throw new errors_1.NotificationError('title is required and must be a non-empty string', errors_1.ErrorCode.INVALID_OPTIONS);
+    }
+    if (typeof o.description !== 'string' || o.description.trim().length === 0) {
+        throw new errors_1.NotificationError('description is required and must be a non-empty string', errors_1.ErrorCode.INVALID_OPTIONS);
+    }
+    if (o.duration !== undefined) {
+        assertNonNegativeInt('duration', o.duration);
+    }
+    if (o.variant !== undefined && !isValidVariant(o.variant)) {
+        throw new errors_1.NotificationError(`variant is invalid: ${String(o.variant)}`, errors_1.ErrorCode.INVALID_OPTIONS);
+    }
+    if (o.theme !== undefined && !isValidThemeMode(o.theme)) {
+        throw new errors_1.NotificationError(`theme is invalid: ${String(o.theme)}`, errors_1.ErrorCode.INVALID_OPTIONS);
+    }
+    if (o.image !== undefined && (typeof o.image !== 'string' || o.image.trim().length === 0)) {
+        throw new errors_1.NotificationError('image must be a non-empty string if provided', errors_1.ErrorCode.INVALID_OPTIONS);
+    }
+    if (o.onClick !== undefined && typeof o.onClick !== 'function') {
+        throw new errors_1.NotificationError('onClick must be a function if provided', errors_1.ErrorCode.INVALID_OPTIONS);
+    }
+    if (o.onClose !== undefined && typeof o.onClose !== 'function') {
+        throw new errors_1.NotificationError('onClose must be a function if provided', errors_1.ErrorCode.INVALID_OPTIONS);
+    }
+    if (o.progress !== undefined) {
+        assertNumber('progress', o.progress);
+        if (o.progress < 0 || o.progress > 100) {
+            throw new errors_1.NotificationError('progress must be between 0 and 100', errors_1.ErrorCode.INVALID_OPTIONS);
+        }
+    }
+    if (o.progressLabel !== undefined && (typeof o.progressLabel !== 'string' || o.progressLabel.trim().length === 0)) {
+        throw new errors_1.NotificationError('progressLabel must be a non-empty string if provided', errors_1.ErrorCode.INVALID_OPTIONS);
+    }
+    if (o.loadingText !== undefined && (typeof o.loadingText !== 'string' || o.loadingText.trim().length === 0)) {
+        throw new errors_1.NotificationError('loadingText must be a non-empty string if provided', errors_1.ErrorCode.INVALID_OPTIONS);
+    }
+}
+//# sourceMappingURL=validators.js.map

package/dist/src/utils/validators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validators.js","sourceRoot":"","sources":["../../../src/utils/validators.ts"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -0,0 +1,4 @@
+export type { CloseReason } from './src/types/notification.types';
+export type { NotificationPosition } from './src/types/position.types';
+export type { ThemeMode } from './src/types/theme.types';
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../types.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAClE,YAAY,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AACvE,YAAY,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "electron-notify-manager",
+  "version": "1.0.0",
+  "description": "In-app toast notifications for Electron using BrowserWindow (not OS native notifications).",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "build:watch": "tsc -p tsconfig.build.json --watch",
+    "clean": "rimraf dist",
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "prepublishOnly": "npm run clean && npm run build"
+  },
+  "files": [
+    "dist/",
+    "renderer/"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/feruzlabs/electron-notify-manager"
+  },
+  "bugs": {
+    "url": "https://github.com/feruzlabs/electron-notify-manager/issues"
+  },
+  "homepage": "https://github.com/feruzlabs/electron-notify-manager#readme",
+  "keywords": [
+    "electron",
+    "notification",
+    "toast",
+    "notify"
+  ],
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/jest": "^29.5.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
+    "electron": "^28.0.0",
+    "eslint": "^8.57.0",
+    "jest": "^29.7.0",
+    "rimraf": "^5.0.0",
+    "ts-node": "^10.9.2",
+    "ts-jest": "^29.2.0",
+    "typescript": "^5.0.0"
+  },
+  "peerDependencies": {
+    "electron": ">=13.0.0"
+  },
+  "license": "MIT"
+}

package/renderer/notification.css

@@ -0,0 +1,172 @@
+:root {
+  --bg: rgba(20, 20, 30, 0.92);
+  --border: rgba(255, 255, 255, 0.08);
+  --title: rgba(255, 255, 255, 0.95);
+  --desc: rgba(255, 255, 255, 0.65);
+  --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  --progress: #4f8ef7;
+  --radius: 12px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  background: transparent;
+  overflow: hidden;
+  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji",
+    "Segoe UI Emoji";
+}
+
+.root {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--radius);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 14px 14px 14px;
+  position: relative;
+
+  opacity: 0;
+  transform: translateX(22px);
+  transition: opacity 180ms ease, transform 260ms ease;
+}
+
+.root.entering {
+  opacity: 0;
+}
+
+.root.entered {
+  opacity: 1;
+  transform: translateX(0px);
+}
+
+.root.exiting {
+  opacity: 0;
+  transform: translateX(22px);
+  transition: opacity 160ms ease, transform 220ms ease;
+}
+
+.image {
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  overflow: hidden;
+  flex: 0 0 auto;
+  display: block;
+}
+
+.image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.defaultIcon {
+  width: 100%;
+  height: 100%;
+  display: none;
+}
+
+.defaultIcon svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.content {
+  min-width: 0;
+  flex: 1 1 auto;
+  padding-right: 24px; /* room for close button */
+}
+
+.title {
+  color: var(--title);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.2;
+  margin-bottom: 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.desc {
+  color: var(--desc);
+  font-size: 12px;
+  line-height: 1.35;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.7);
+  cursor: pointer;
+  outline: none;
+  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
+  display: grid;
+  place-items: center;
+  font-size: 18px;
+  line-height: 1;
+  padding: 0;
+}
+
+.close:hover {
+  background: rgba(255, 80, 80, 0.12);
+  border-color: rgba(255, 80, 80, 0.35);
+  color: rgba(255, 160, 160, 0.95);
+  transform: translateY(-1px);
+}
+
+.progressWrap {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 3px;
+  background: rgba(255, 255, 255, 0.06);
+  border-bottom-left-radius: var(--radius);
+  border-bottom-right-radius: var(--radius);
+  overflow: hidden;
+}
+
+.progress {
+  height: 100%;
+  width: 100%;
+  background: var(--progress);
+  transform-origin: left center;
+  transform: scaleX(1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .root,
+  .root.exiting {
+    transition: none;
+  }
+}
+

package/renderer/notification.html

@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Notification</title>
+    <link rel="stylesheet" href="./styles/themes.css" />
+    <link rel="stylesheet" href="./styles/animations.css" />
+    <link rel="stylesheet" href="./styles/notification.css" />
+  </head>
+  <body>
+    <div
+      id="notification"
+      class="notification entering"
+      data-variant="default"
+      data-theme="dark"
+      role="button"
+      tabindex="0"
+      aria-label="Notification"
+    >
+      <div class="icon-area" id="iconArea" aria-hidden="true">
+        <img id="image" class="icon-image" alt="" />
+        <div id="iconSvg" class="icon-svg"></div>
+      </div>
+
+      <div class="content">
+        <div class="title" id="title"></div>
+        <div class="description" id="desc"></div>
+        <div class="progress-info" id="progressInfo">
+          <span class="progress-label" id="progressLabel"></span>
+          <span class="progress-percent" id="progressPercent"></span>
+        </div>
+      </div>
+
+      <button class="close-btn" id="closeBtn" aria-label="Close">
+        <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+          <path
+            d="M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12 5.7 16.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z"
+            fill="currentColor"
+          />
+        </svg>
+      </button>
+
+      <div class="bottom-bar" id="bottomBar" aria-hidden="true">
+        <div class="bottom-bar-fill" id="bottomBarFill"></div>
+      </div>
+    </div>
+
+    <script src="./scripts/notification.js"></script>
+  </body>
+</html>
+

package/renderer/notification.js

@@ -0,0 +1,137 @@
+/* eslint-disable */
+'use strict';
+
+// Runtime file used by `notification.html` directly.
+// Source-of-truth TypeScript is `notification.ts`.
+
+/**
+ * @param {string} key
+ * @param {string} fallback
+ */
+function getParam(key, fallback = '') {
+  const sp = new URLSearchParams(window.location.search);
+  const v = sp.get(key);
+  return v == null ? fallback : v;
+}
+
+/**
+ * @param {string} key
+ * @param {number} fallback
+ */
+function getNumberParam(key, fallback) {
+  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 imgWrap = document.getElementById('imageWrap');
+const imgEl = document.getElementById('image');
+const defaultIconEl = document.getElementById('defaultIcon');
+const progressEl = document.getElementById('progress');
+
+titleEl.textContent = title;
+descEl.textContent = description;
+
+const hasImage = typeof image === 'string' && image.trim().length > 0;
+if (hasImage) {
+  imgEl.src = image;
+  imgEl.style.display = 'block';
+  defaultIconEl.style.display = 'none';
+} else {
+  imgEl.removeAttribute('src');
+  imgEl.style.display = 'none';
+  defaultIconEl.style.display = 'block';
+}
+
+let closing = false;
+let autoTimer = null;
+
+function enter() {
+  requestAnimationFrame(() => {
+    root.classList.remove('entering');
+    root.classList.add('entered');
+  });
+}
+
+/**
+ * @param {'timeout'|'manual'} reason
+ */
+function requestClose(reason) {
+  if (closing) return;
+  closing = true;
+
+  if (autoTimer) {
+    clearTimeout(autoTimer);
+    autoTimer = null;
+  }
+
+  root.classList.remove('entered');
+  root.classList.add('exiting');
+
+  // Let animation play then ask main to close/destroy.
+  setTimeout(() => {
+    window.electronNotify.sendClose(id);
+  }, 220);
+
+  // Prevent click handler from firing late.
+  root.style.pointerEvents = 'none';
+}
+
+function startProgress() {
+  if (duration <= 0) {
+    // sticky: hide progress track
+    progressEl.style.opacity = '0';
+    return;
+  }
+
+  progressEl.style.opacity = '1';
+  progressEl.animate(
+    [{ transform: 'scaleX(1)' }, { transform: 'scaleX(0)' }],
+    { duration, easing: 'linear', fill: 'forwards' }
+  );
+
+  autoTimer = setTimeout(() => requestClose('timeout'), duration);
+}
+
+closeBtn.addEventListener('click', (e) => {
+  e.preventDefault();
+  e.stopPropagation();
+  requestClose('manual');
+});
+
+root.addEventListener('click', () => {
+  if (closing) return;
+  window.electronNotify.sendClick(id);
+  requestClose('manual');
+});
+
+root.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter' || e.key === ' ') {
+    e.preventDefault();
+    root.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();
+